Badge
Feedbackv1.0.0
stable
A small visual indicator for status, count, or category.
Variants
Badge
primary
Badge
secondary
Badge
success
Badge
warning
Badge
destructive
Badge
outline
Badge
ghost
Sizes
Badge
sm
Badge
md
Badge
lg
npx inam-ui add badgeUsage Examples
Status Indicator
Use badges to show status messages
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Error</Badge>Accessibility
Screen Reader
Badges are used for visual information. Ensure they are meaningful to screen readers or supplemented with text.
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline' | 'ghost' | 'primary' | Visual style of the badge. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge. |
children* | React.ReactNode | — | Badge content. |