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 the color of the badge, how big it is, and whether it carries an icon.

Color

color sets the intent of the badge. The default is accent.

1<Flex gap={5}>
2  <Badge color="accent">Accent</Badge>
3  <Badge color="attention">Attention</Badge>
4  <Badge color="danger">Danger</Badge>
5  <Badge color="success">Success</Badge>
6  <Badge color="neutral">Neutral</Badge>
7  <Badge color="gradient">Gradient</Badge>
8</Flex>

Size

Three sizes. small is the default. regular matches body text and suits badges that stand alone, for example beside a heading. 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>