Skip to main content

Badge

Badge is a compact, high-visibility label used to communicate status, categories, or metadata.

All Variants​

<Badge variant="default">Default</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="neutral">Neutral</Badge>
DefaultInfoSuccessWarningDangerNeutral

All Sizes​

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
SmallMediumLarge

With Icon + Interactive​

<Badge variant="success" icon="✅" onClick={() => alert('Clicked!')}>Healthy</Badge>
<Badge variant="warning" icon="⚠️">Needs Attention</Badge>
✅Healthy⚠️Needs Attention

Props​

PropTypeDefaultDescription
variant'default' | 'info' | 'success' | 'warning' | 'danger' | 'neutral''default'Semantic color
size'sm' | 'md' | 'lg''md'Size
iconReactNode—Leading icon
onClickfunction—Makes it interactive

Best Practices​

  • Use for status (Healthy, Error, etc.)
  • Prefer sm size in dense tables
  • Combine with Card.Badge slot
  • Tag — Static category labels
  • Chip — Removable labels