Indicator
Positions an overlay element (badge, dot, count) at a corner of its child
Category: layout · WCAG 2.2-AA · badge, indicator, overlay, notification, layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content rendered inside the component. |
overlay | React.ReactNode | — | The element to display at the corner (badge, dot, count) |
placement | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | top-end | Placement relative to the trigger. |
className | string | — | Additional CSS class names merged onto the root element. |
When to use
- Notification counts on icon buttons
- Status dots on avatars
When not to use
- Inline badges within text — use Badge directly
- Status messages below a field — use a form hint or Alert
How to build an accessible Indicator in React →
Examples
Notification count
Notification count badge on an icon button
<Indicator overlay={<Badge>3</Badge>}><Button variant="ghost"><Icon name="bell" /></Button></Indicator>Online status
Online status dot on an avatar
<Indicator overlay={<span className="status-dot" />} placement="bottom-end"><Avatar src="/user.jpg" /></Indicator>Bottom-start placement
Indicator positioned at the bottom-start corner
<Indicator overlay={<Badge variant="destructive">!</Badge>} placement="bottom-start"><Card>Content</Card></Indicator>