Badge
Inline label for status, category, or count.
Installation
npx dafink-ui add badgeDemo
DefaultSuccessWarningDangerOutline
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'success' | 'warning' | 'danger' | 'outline' | 'default' | Visual style of the badge. |
| className | string | '' | Additional CSS classes. |
Accessibility
Badge renders a plain <span> with no ARIA role and nothing focusable; it has no keyboard behavior of its own. Status variants pair their color with a distinct text label (e.g. "Active", "Failed"), so meaning never depends on color alone. A badge showing live-updating status should get a wrapping aria-live="polite" region from the consumer.