Badge

A small label for highlighting status, counts, or categories at a glance, such as marking an item as new or showing its state.

Anatomy

Import and assemble the component:

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

3<Badge />

Usage

Set how filled the badge looks, how big it is, and whether it carries an icon.

Variant

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

1<Flex gap={5}>
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>

Outline

Set outline to draw a border in the variant color and remove the fill.

1<Flex gap={5}>
2  <Badge outline variant="accent">
3    Accent
4  </Badge>
5  <Badge outline variant="warning">
6    Warning
7  </Badge>
8  <Badge outline variant="danger">
9    Danger
10  </Badge>
11  <Badge outline variant="success">
12    Success
13  </Badge>
14  <Badge outline variant="neutral">
15    Neutral

Dot

Set dot to render a small colored circle, for example a notification or status marker. The badge does not render children or icon in this mode. Pass screenReaderText so screen readers can announce the dot.

1<Flex gap={5} align="center">
2  <Badge dot variant="accent" screenReaderText="New" />
3  <Badge dot variant="warning" screenReaderText="Pending" />
4  <Badge dot variant="danger" screenReaderText="Error" />
5  <Badge dot variant="success" screenReaderText="Online" />
6  <Badge dot variant="neutral" screenReaderText="Offline" />
7</Flex>

Size

Three sizes. small is the default. micro fits inside table rows and beside dense labels.

1<Flex gap={5} 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={5}>
2  <Badge icon={<Home size="16" />}>Badge</Badge>
3  <Badge icon={<Laugh size="16" />}>Badge</Badge>
4  <Badge icon="🔥">Badge</Badge>
5</Flex>

API Reference

Renders a small label for status, count, or category indication.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
badgeThe root <span> element
badge-iconWrapper around icon (when set)
badge-screen-reader-textVisually hidden text (when screenReaderText is set)

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>