Components
Badge
A small visual label for status, counts, or categories, with default, secondary, destructive, and outline variants.
Install
npx shadcn@latest add https://atomx.acau.net/r/badge.jsonUsage
Badge is a compact inline label — use it for statuses, counts, tags, or categories. It renders a <span> by default and accepts an <svg> icon as a leading child, which is sized automatically.
Pick the variant that matches intent: default for primary emphasis, secondary for muted labels, destructive for errors or warnings, and outline for low-emphasis tags. Pass asChild to render the badge as another element — for example a link — while keeping its styling.
<Badge variant="secondary">Beta</Badge>
<Badge asChild>
<a href="/changelog">v0.1.11</a>
</Badge>Preview
Variants
DefaultSecondaryDestructiveOutline
Props
Badge extends React.ComponentProps<"span">.
| Prop | Type | Notes |
|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | Visual style. Defaults to default. |
asChild | boolean | Render the child element instead of a <span>, keeping badge styling. |
className | string | Merged with the variant classes. |