Indicator

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

Usage

import { Indicator } from "@raystack/apsara/v1";
 
<Indicator variant="accent" label="New">
  <div>Content</div>
</Indicator>;

Indicator Props

Prop	Type	Default
`variant`	`"accent" \| "warning" \| "danger" \| "success" \| "neutral"`	`"accent"`
`label`	`string`	-
`ariaLabel`	`string`	-
`children`	`ReactNode`	-
`className`	`string`	-

Examples

Variant

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

<Flex gap="large" align="center">
  <Indicator variant="accent">
    <Button color="neutral">Notification</Button>
  </Indicator>
  <Indicator variant="warning">
    <Button color="neutral">Notification</Button>
  </Indicator>
  <Indicator variant="danger">
    <Button color="neutral">Notification</Button>
  </Indicator>
  <Indicator variant="success">
    <Button color="neutral">Notification</Button>
  </Indicator>
  <Indicator variant="neutral">
    <Button color="neutral">Notification</Button>
  </Indicator>
</Flex>

Label

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

<Flex gap="large">
  <Indicator variant="accent" label="2 new">
    <Button color="neutral">Notification</Button>
  </Indicator>
  <Indicator variant="accent">
    <Button color="neutral">Notification</Button>
  </Indicator>
</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:

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