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"`	`"default"`	Visual weight of the badge.
`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.