<a id="indicator"></a>

## Indicator  
**Category**: Layout
Visual markers for highlighting interface elements
### Examples

#### Status indicator  
```python
Div(
    Span(cls='indicator-item status status-success'),
    Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
    cls='indicator'
)
```

#### Button indicator  
```python
Div(
    Span('99+', cls='indicator-item badge badge-secondary'),
    Button('inbox', cls='btn'),
    cls='indicator'
)
```

#### Multiple indicators  
```python
Div(
    Span('↖︎', cls='indicator-item indicator-top indicator-start badge'),
    Span('↑', cls='indicator-item indicator-top indicator-center badge'),
    Span('↗︎', cls='indicator-item indicator-top indicator-end badge'),
    Span('←', cls='indicator-item indicator-middle indicator-start badge'),
    Span('●', cls='indicator-item indicator-middle indicator-center badge'),
    Span('→', cls='indicator-item indicator-middle indicator-end badge'),
    Span('↙︎', cls='indicator-item indicator-bottom indicator-start badge'),
    Span('↓', cls='indicator-item indicator-bottom indicator-center badge'),
    Span('↘︎', cls='indicator-item indicator-bottom indicator-end badge'),
    Div('Box', cls='bg-base-200 grid h-32 w-60 place-items-center'),
    cls='indicator'
)
```

#### Top Start  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-top indicator-start'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Top Center  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-top indicator-center'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Top End  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-top indicator-end'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Middle Start  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-middle indicator-start'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Middle Center  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-middle indicator-center'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Middle End  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-middle indicator-end'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Bottom Start  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-bottom indicator-start'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Bottom Center  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-bottom indicator-center'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Bottom End  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-bottom indicator-end'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Badge with text  
```python
Div(
    Span('new', cls='indicator-item badge badge-primary'),
    Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
    cls='indicator'
)
```

#### Responsive indicators  
```python
Div(
    Span(
        cls='indicator-item indicator-start sm:indicator-middle md:indicator-bottom lg:indicator-center xl:indicator-end badge badge-secondary'
    ),
    Div(
        'content',
        cls='grid w-32 h-32 rounded bg-base-300 place-items-center'
    ),
    cls='indicator'
)
```

#### Tab indicator  
```python
Div(
    A('Messages', cls='tab'),
    A(
        'Notifications',
        Span('8', cls='indicator-item badge'),
        cls='indicator tab tab-active'
    ),
    A('Requests', cls='tab'),
    cls='tabs tabs-lifted'
)
```

#### Avatar indicator  
```python
Div(
    Span('typing…', cls='indicator-item badge badge-secondary'),
    Div(
        Img(src='https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'),
        cls='h-20 w-20 rounded-lg'
    ),
    cls='avatar indicator'
)
```

#### Input indicator  
```python
Div(
    Span('Required', cls='indicator-item badge'),
    Input(type='text', placeholder='Your email address', cls='input input-bordered'),
    cls='indicator'
)
```

#### Card indicator  
```python
Div(
    Div(
        Button('Apply', cls='btn btn-primary'),
        cls='indicator-item indicator-bottom'
    ),
    Div(
        Div(
            H2('Job Title', cls='card-title'),
            P('Rerum reiciendis beatae tenetur excepturi'),
            cls='card-body'
        ),
        cls='card border'
    ),
    cls='indicator'
)
```

#### Image indicator  
```python
Div(
    Span('Uploading Image...', cls='indicator-item indicator-center indicator-middle badge'),
    Img(alt='Tailwind CSS examples', src='https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp'),
    cls='indicator'
)
```