apsara

Documentation Examples

BadgeBadge component to display concise information.

Preview

AccentWarningDangerSuccessNeutralGradient

Usage

The Badge component is used to highlight information or indicate status in a concise manner.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { Badge } from '@raystack/apsara/v1'

<Badge variant="accent" size="micro">Badge Text</Badge>

Badge Props

The Badge component accepts the following props:

variant: Visual style variant ("accent" | "warning" | "danger" | "success" | "neutral" | "gradient", default: "accent")
size: Size of the badge ("micro" | "small" | "regular", default: "small")
icon: Optional ReactNode to display an icon before the text
screenReaderText: Additional text content only announced to screen readers
children: Text content of the badge
className: Additional CSS class names

Variants

Choose between different variants to convey different meanings or importance levels. Default variant is accent.

Sizes

The Badge component supports three sizes to accommodate various layout requirements. Default size is small.

With Icon

Badges can include an icon to provide additional visual context. By default there is no icon.

Accessibility

The Badge component includes screen reader support through the screenReaderText prop, only be announced to screen readers. By default no text is passed to screenReaderText prop.

Examples

Here are some common use cases for the Badge component: