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>

Size

Three sizes. regular is the default; small and micro fit 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>