Indicator
Wraps a child element and renders a positioned badge overlaid on it. Use it to show notification counts, online status, or activity indicators on avatars and icons.
Default dot
<Indicator>
<Avatar radius="sm" />
</Indicator>With label (count)
3
99+
<Indicator label="3" size={18}>
<Avatar radius="sm" />
</Indicator>
<Indicator label="99+" size={20} color="red">
<Avatar radius="sm" />
</Indicator>Positions
<Indicator position="top-end">...</Indicator>
<Indicator position="bottom-start">...</Indicator>
<Indicator position="middle-center">...</Indicator>Colors and processing
<Indicator color="green" withBorder>
<Avatar radius="sm" />
</Indicator>
<Indicator color="red" processing>
<Avatar radius="sm" />
</Indicator>
<Indicator disabled>
<Avatar radius="sm" />
</Indicator>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | — | Fill color of the indicator badge |
size | number|string | — | Diameter of the badge — pixel number or CSS length |
label | ReactNode | — | Text or element inside the badge; omit for a plain dot |
offset | number | — | Distance in pixels between badge and child edge |
position | IndicatorPosition | 'top-end' | Corner or edge where the badge is anchored |
withBorder | boolean | — | Adds a white border around the badge |
processing | boolean | — | Pulse animation to indicate live or active state |
disabled | boolean | — | Hides the badge while still rendering the child |
inline | boolean | — | Uses inline-flex positioning instead of absolute |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | The element the badge is anchored to |