Indicator

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

<Indicator />

<Indicator label="3" />

<Indicator label="99+" />

<Indicator label="New" />

<Indicator variant="accent" />

<Indicator variant="warning" />

<Indicator variant="danger" />

<Indicator variant="success" />

<Indicator variant="neutral" />

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

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

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

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

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

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

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

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

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