Logoapsara
DocumentationExamples
IndicatorA small dot indicator with small information that can be positioned on top of other components.
Preview
Content
New
Content with dot
Installation
Install the component from your command line. 
npm install @raystack/apsara
Import and usage. 
import { Indicator } from '@raystack/apsara/v1'

<Indicator variant="accent" label="New">
  <div>Content</div>
</Indicator>
Props
The Indicator component accepts the following props:
  • variant: Visual style variant ("accent" | "warning" | "danger" | "success" | "neutral", default: "accent")
  • label: Optional text label to display (if omitted, shows a dot)
  • aria-label: Optional custom description for screen readers
  • children: The content to show the indicator on
  • className: Additional CSS class names
  • All other HTMLDivElement attributes from React
Variants
The Indicator component supports different variants to convey different states or meanings:
loading...
Dot Indicator
When no label is provided, the Indicator will show as a dot:
loading...
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:
loading...