Badge

Badge Props

Prop	Type	Default
`variant`	`"accent" \| "warning" \| "danger" \| "success" \| "neutral" \| "gradient"`	`"accent"`
`size`	`"micro" \| "small" \| "regular"`	`"small"`
`icon`	`ReactNode`	-
`screenReaderText`	`string`	-
`children`	`ReactNode`	-
`className`	`string`	-

Examples

Variant

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

<Flex gap="medium">
  <Badge variant="accent">Accent</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="neutral">Neutral</Badge>
  <Badge variant="gradient">Gradient</Badge>
</Flex>

Size

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

<Flex gap="medium" align="center">
  <Badge size="micro">Micro</Badge>
  <Badge size="small">Small</Badge>
  <Badge size="regular">Regular</Badge>
</Flex>

With Icon

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

<Flex gap="medium">
  <Badge icon={<Home size="16" />}>Badge</Badge>
  <Badge icon={<Laugh size="16" />}>Badge</Badge>
  <Badge icon="🔥">Badge</Badge>
</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.

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