# Indicator

A small dot or label badge positioned over the corner of another element — a notification
count on an avatar, an online status on an icon, and so on. The block body is the element
being marked; the indicator is drawn over it. Set `label` for a count, or omit it for a plain
dot.

Use it as `{% indicator %}` in Markdown, or call it from Python logic
(loops, snippets) via `component('aardvark', 'indicator', …)`. Close the tag with
`{% endIndicator %}`.

## Demonstrations

### Label, dot, and a pulsing status

Set `label` for a count; omit it for a plain dot; add `processing=true` for a pulsing
animation (a live status):





 



 





<br>

Source: Markdown

```aardvark
{% indicator label='3' color='red' %}
{% avatar name='Ada Lovelace' %}
{% endIndicator %}

{% indicator color='blue' %}
{% avatar name='Alan Turing' %}
{% endIndicator %}

{% indicator color='green' processing=true %}
{% avatar name='Grace Hopper' %}
{% endIndicator %}
```


Source: Python

```python
component('aardvark', 'indicator', label='3', color='red',
          children=component('aardvark', 'avatar', name='Ada Lovelace'))
component('aardvark', 'indicator', color='blue',
          children=component('aardvark', 'avatar', name='Alan Turing'))
component('aardvark', 'indicator', color='green', processing=True,
          children=component('aardvark', 'avatar', name='Grace Hopper'))
```



### Position, border, and offset

`position` places the indicator at any corner or edge — `top-start`, `top-center`,
`top-end` (the default), `middle-start`, …, `bottom-end`. `withBorder` rings it; `offset`
nudges it inward (useful over a rounded target); `radius` rounds a labelled badge.





 



 





<br>

Source: Markdown

```aardvark
{% indicator label='1' position='top-start' %}
{% avatar name='A' %}
{% endIndicator %}

{% indicator label='2' position='bottom-end' withBorder=true %}
{% avatar name='B' %}
{% endIndicator %}

{% indicator label='9' position='top-end' offset=4 radius='sm' %}
{% avatar name='C' %}
{% endIndicator %}
```


Source: Python

```python
component('aardvark', 'indicator', label='1', position='top-start',
          children=component('aardvark', 'avatar', name='A'))
component('aardvark', 'indicator', label='2', position='bottom-end', withBorder=True,
          children=component('aardvark', 'avatar', name='B'))
component('aardvark', 'indicator', label='9', position='top-end', offset=4, radius='sm',
          children=component('aardvark', 'avatar', name='C'))
```



### Size, disabled, and autoContrast

`size` sets the dot diameter in pixels. `disabled` renders only the child (no indicator) —
handy for toggling the badge in a loop. `autoContrast` picks a readable label color for the
background.





 



 





<br>

Source: Markdown

```aardvark
{% indicator color='grape' size=16 label='5' %}
{% avatar name='D' %}
{% endIndicator %}

{% indicator color='yellow' label='2' autoContrast=true %}
{% avatar name='E' %}
{% endIndicator %}

{% indicator label='0' disabled=true %}
{% avatar name='F' %}
{% endIndicator %}
```


Source: Python

```python
component('aardvark', 'indicator', color='grape', size=16, label='5',
          children=component('aardvark', 'avatar', name='D'))
component('aardvark', 'indicator', color='yellow', label='2', autoContrast=True,
          children=component('aardvark', 'avatar', name='E'))
component('aardvark', 'indicator', label='0', disabled=True,
          children=component('aardvark', 'avatar', name='F'))
```



## With other components

The body can be any element. Here a status dot rides on an
[`{% icon %}`](/components/data-display/icon/); `inline` keeps the wrapper
flowing inline with surrounding text:







<br>

Source: Markdown

```aardvark
{% indicator color='green' size=10 offset=4 inline=true %}
{% icon 'bell' size='lg' %}
{% endIndicator %}
```


Source: Python

```python
component('aardvark', 'indicator', color='green', size=10, offset=4, inline=True,
          children=component('aardvark', 'icon', 'bell', size='lg'))
```



## Attributes

Omit any attribute to take its default.

| Attribute | Valid values | Description |
| --- | --- | --- |
| `label` | string | Text/count shown in the indicator. Omit it for a plain dot. |
| `color` | any theme color | The indicator's color. |
| `size` | integer (pixels; `10` by default) | Dot diameter. |
| `position` | `top-start`, `top-center`, `top-end` (default), `middle-start`, `middle-center`, `middle-end`, `bottom-start`, `bottom-center`, `bottom-end` | Where the indicator sits over the child. |
| `offset` | integer (pixels) | Nudge inward — useful over a rounded target. |
| `radius` | `xs`, `sm`, `md`, `lg`, `xl`, or any CSS value | Corner rounding of a labelled badge. |
| `withBorder` | bool flag (default `false`) | Draw a border around the indicator. |
| `processing` | bool flag (default `false`) | A pulsing animation. |
| `disabled` | bool flag (default `false`) | Render only the child (no indicator). |
| `inline` | bool flag (default `false`) | Lay the container out as an inline element. |
| `autoContrast` | bool flag (default `false`) | Auto-pick a readable label color for the background. |
| body | Markdown / components | The element the indicator is positioned over. |
## CSS Selectors

Target the rendered element through its island marker — `[data-aardvark-island="Indicator"]` — or through the Mantine Styles API classes (`.mantine-Indicator-root` and its inner parts):


```css
/* Every rendered Indicator carries this island marker */
[data-aardvark-island="Indicator"] { }

/* Mantine Styles API class on the root element */
.mantine-Indicator-root { }
.mantine-Indicator-indicator { }
```


## Injecting Attributes

`attr={…}` forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert:







<br>

Source: Markdown

```aardvark
{% indicator label='3' color='red' attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''} %}{% avatar name='Ada Lovelace' %}{% endIndicator %}
```


Source: Python

```python
component('aardvark', 'indicator', label='3', color='red', attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''}, children=component('aardvark', 'avatar', name='Ada Lovelace'))
```