Skip to main content

Actions and status

Badge

Display compact status or taxonomy labels. It's like putting a colorful little sticker on your data to make it feel special.

Curated demo

Default Success Warning Danger Info

Reference

Display compact status or taxonomy labels. It's like putting a colorful little sticker on your data to make it feel special.

  • Use short labels that fit in one line. If your badge needs a scrollbar, you're doing it wrong.
  • Avoid using badges as primary navigation. They're meant to be cute little metadata tags, not big chunky buttons.
  • Great for status indicators (e.g., 'New', 'Beta', 'Failed spectacularly').

Props

Name Type Default Description
variant 'default' | 'success' | 'warning' | 'danger' | 'info' 'default' The visual variant of the badge.
class string — Additional CSS classes.

Example snippet

<div class="flex flex-wrap gap-3">
  <Badge>Default</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="info">Info</Badge>
</div>