Basics
Badges
Short, non-interactive labels for status, category, or supporting metadata.
Badges
Short, non-interactive labels for status, category, or supporting metadata.
PrimarySecondaryOutlineDestructive
Keep badge copy brief. Use an alert when the message requires explanation or action.
Usage and props
Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.
Badge
import { Badge } from '@wafm/ui/components/badge'
<Badge variant="secondary">Draft</Badge>- variant
- default, secondary, destructive, or outline. Use concise status text; badges are not actions.