Badge

Badge component to display concise information.

Usage

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

Badge Props

Prop

Type

Examples

Variant

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

1<Flex gap="medium">
2  <Badge variant="accent">Accent</Badge>
3  <Badge variant="warning">Warning</Badge>
4  <Badge variant="danger">Danger</Badge>
5  <Badge variant="success">Success</Badge>
6  <Badge variant="neutral">Neutral</Badge>
7  <Badge variant="gradient">Gradient</Badge>
8</Flex>

Size

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

1<Flex gap="medium" align="center">
2  <Badge size="micro">Micro</Badge>
3  <Badge size="small">Small</Badge>
4  <Badge size="regular">Regular</Badge>
5</Flex>

With Icon

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

1<Flex gap="medium">
2  <Badge icon={<Home size="16" />}>Badge</Badge>
3  <Badge icon={<Laugh size="16" />}>Badge</Badge>
4  <Badge icon="🔥">Badge</Badge>
5</Flex>

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.

1<Badge screenReaderText="New updates available">Updates</Badge>