Badge

Markdown for agents

A small status indicator component for displaying tags, counts, or status information.

npx slipstream-ui@latest add badge
Variants
New
Info
Error
Beta
3
Active
Status & count badges
New
Beta
Active
3
12
99+
Messages
3

Props

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline''default'Visual style variant
childrenReactNoderequiredContent to display

Accessibility

  • Badge content is announced by screen readers
  • All variants meet WCAG AA contrast requirements
  • Consider adding aria-label for status-only badges
  • Use semantic status terminology