Indicator

A small dot indicator with small information that can be positioned on top of other components.

Usage

1import { Indicator } from "@raystack/apsara";

Indicator Props

Prop

Type

Examples

Variant

The Indicator component supports different variants to convey different states or meanings:

1<Flex gap="large" align="center">
2  <Indicator variant="accent">
3    <Button color="neutral">Notification</Button>
4  </Indicator>
5  <Indicator variant="warning">
6    <Button color="neutral">Notification</Button>
7  </Indicator>
8  <Indicator variant="danger">
9    <Button color="neutral">Notification</Button>
10  </Indicator>
11  <Indicator variant="success">
12    <Button color="neutral">Notification</Button>
13  </Indicator>
14  <Indicator variant="neutral">
15    <Button color="neutral">Notification</Button>
16  </Indicator>
17</Flex>

Label

When no label is provided, the Indicator will show as a dot

1<Flex gap="large">
2  <Indicator variant="accent" label="2 new">
3    <Button color="neutral">Notification</Button>
4  </Indicator>
5  <Indicator variant="accent">
6    <Button color="neutral">Notification</Button>
7  </Indicator>
8</Flex>

Accessibility

The Indicator component includes several accessibility features:

  • Uses role="status" to indicate its purpose to screen readers
  • Provides appropriate aria-label based on the content:
    • Uses custom ariaLabel prop if provided
    • Falls back to the label text if available
    • Uses a default "indicator" if neither is provided
  • Hides decorative dot from screen readers when no label is present

Example with custom aria label:

1<Indicator variant="danger" label="3" aria-label="3 unread messages">
2  <div
3    style={{
4      padding: "0px 12px",
5      fontSize: "14px",
6      border: "1px solid var(--rs-color-border-base-primary)",
7      borderRadius: "var(--rs-radius-2)",
8    }}>
9    Content with custom aria label
10  </div>
11</Indicator>