Skip to main content

​
Import

import { Indicator } from '@raystack/apsara';

​
Usage

<Indicator />

​
With label

<Indicator label="3" />

<Indicator label="99+" />

<Indicator label="New" />

​
Variants

<Indicator variant="accent" />

<Indicator variant="warning" />

<Indicator variant="danger" />

<Indicator variant="success" />

<Indicator variant="neutral" />

​
On elements

import { Avatar } from '@raystack/apsara';

<Indicator variant="success">
  <Avatar src="/user.jpg" alt="User" />
</Indicator>

​
With buttons

import { Button } from '@raystack/apsara';

<Indicator label="5" variant="danger">
  <Button>Notifications</Button>
</Indicator>

​
Online status

<Indicator variant="success">
  <Avatar src="/user.jpg" alt="John Doe" />
</Indicator>

<Indicator variant="neutral">
  <Avatar src="/user2.jpg" alt="Jane Smith" />
</Indicator>

​
Notification count

<Indicator label="12" variant="danger">
  <IconButton>
    <BellIcon />
  </IconButton>
</Indicator>

​
Custom positioning

<div style={{ position: 'relative' }}>
  <Indicator label="New" variant="accent">
    <Card>
      <Text>Item with indicator</Text>
    </Card>
  </Indicator>
</div>

​
Accessibility

<Indicator 
  variant="danger" 
  label="3"
  aria-label="3 unread notifications"
>
  <Button>Messages</Button>
</Indicator>

​
API reference

​
Indicator

​
variant
'accent' | 'warning' | 'danger' | 'success' | 'neutral'
default:"'accent'"
The color variant of the indicator.
​
label
string
Optional text label to display inside the indicator. When provided, the indicator shows as a badge with the label text.
​
children
React.ReactNode
The element to position the indicator relative to. If not provided, the indicator renders independently.
​
aria-label
string
Accessible label for screen readers. If not provided, defaults to the label prop or a generated label based on the variant.
​
className
string
Additional CSS class names to apply to the indicator.