Badge
Compact label for status, category, or count. Four variants cover most use cases.
Install
Import path
Examples
Variants
Five styles for status, category, and emphasis.
Custom Colors
You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.
With Icon
You can render an icon inside the badge. Use data-icon='inline-start' to render the icon on the left and data-icon='inline-end' to render the icon on the right.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
With Spinner
You can render a spinner inside the badge. Remember to add the data-icon='inline-start' or data-icon='inline-end' prop to the spinner.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Badge } from "@codefast/ui/badge";
<Badge variant="default">Label</Badge>
API reference
Props for each part of the component. All native element props are also forwarded.
Badge
Renders a <span>, or its child element when asChild is set.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "default" | Visual style of the badge. |
| asChild | boolean | false | Merge props onto the single child — e.g. an <a> — instead of a <span>. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- A badge is decorative text by default and needs no role.
- When a badge conveys status (e.g. “Error”), keep the meaning in the text, not colour alone.
- When made interactive via asChild, ensure the child element is itself focusable (a link or button).
Guidelines
Conventions that keep usage consistent across an app.
Do
- Keep badge text to one or two words.
- Use destructive/secondary variants to map to a consistent status scale.
Don’t
- Don’t put long sentences or interactive controls inside a badge.
- Don’t use a badge as the only signal for critical state.