# daisyUI Documentation - Indicator Component

Indicators are used to place an element on the corner of another element.

## Classes and Usage

### Core Classes:
- **indicator** - The main indicator container
- **indicator-item** - The indicator element itself
- **indicator-start** - Aligns indicator to start
- **indicator-center** - Centers indicator
- **indicator-end** - Aligns indicator to end
- **indicator-top** - Positions indicator at top
- **indicator-middle** - Positions indicator in middle
- **indicator-bottom** - Positions indicator at bottom

## Examples

### Basic Indicator

```html
<div class="indicator">
  <span class="indicator-item badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
```

### Indicator with Positioning

```html
<!-- Top start -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Top center -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Top end -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Middle start -->
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-start badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Middle end -->
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-end badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Bottom start -->
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Bottom center -->
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-center badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Bottom end -->
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-end badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
```

### Indicator with Avatar

```html
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
  <div class="avatar placeholder">
    <div class="bg-neutral text-neutral-content rounded-full w-24">
      <span class="text-xl">U</span>
    </div>
  </div>
</div>
```

### Indicator with Button

```html
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
  <button class="btn btn-primary">Messages</button>
</div>
```

## Features

- Places elements on the corner of another element
- Multiple positioning options (top, middle, bottom and start, center, end)
- Works with badges, avatars, buttons and other elements
- Responsive design

This component is useful for creating notification indicators, badges, or any overlay elements that need to be positioned relative to other content.