Browse the docs
Badge
Compact label for status and metadata. Renders a <span>, so it sits inline
with text.
DefaultOutlineAccentPassingDegradedFailed
SmallMedium
Props
| Prop | Values | Default | Description |
|---|---|---|---|
variant | "default", "outline", "accent", "success", "warning", "danger", "none" | "default" | Visual weight. "none" emits no color classes — your className owns them. |
size | "sm", "md" | "md" | Padding and text size. |
className | string | "" | Appended after the component's own classes. |
All other <span> attributes are forwarded, including ref.
Common patterns
<Badge>Draft</Badge>
<Badge variant="accent">New</Badge>
<Badge variant="danger">Failed</Badge>
// Inline with a heading
<h2 className="flex items-center gap-2">
Billing <Badge variant="outline">Beta</Badge>
</h2>Notes
Badge is not interactive. If you need a dismissible or clickable chip, wrap it
in a <button> or add your own handlers — every span attribute is forwarded.
success and warning read the optional --color-success and
--color-warning tokens. Delete either from your theme and that variant
renders with an empty background.