Labels a status, count, or category without pulling focus.
import { Badge } from "@/fragments/ui";Sourceimport { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Badge>Neutral</Badge>
<Badge tone="success">Active</Badge>
<Badge tone="warning">Pending</Badge>npx @usefragments/cli add badgeWrites src/fragments/ui/components/Badge plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Leading dot for live state; it breathes while still moving.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Badge tone="success" dot>Online</Badge>
<Badge tone="warning" dot>Away</Badge>
<Badge tone="danger" dot>Offline</Badge>Hairline metadata pill, and filter chrome that marks the active one.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Badge variant="outline" dotColor="var(--fui-color-accent)">Design</Badge>
<Badge variant="outline" dotColor="var(--fui-color-success)">Shipped</Badge>
<Badge variant="ghost" active>All</Badge>sm for dense tables, lg for reference status pills.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" align="center" wrap>
<Badge tone="success" size="sm">Small</Badge>
<Badge tone="success" size="md">Medium</Badge>
<Badge tone="success" size="lg">Large</Badge>Dismissible tags the user added themselves.
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="sm" wrap>
<Badge tone="info" onRemove={() => {}}>React</Badge>
<Badge tone="info" onRemove={() => {}}>TypeScript</Badge>
<Badge tone="info" onRemove={() => {}}>CSS</Badge>Looks the same, but screen readers now hear the change.
<Badge tone="success" announce>Saved</Badge>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Badge label text |
variant | enumsoftoutlineghost | soft | Chrome family. `soft` is the tinted pill; `outline` is a hairline metadata pill (pair with dotColor); `ghost` is transparent filter chrome (pair with active). |
tone | enumneutralaccentinfosuccesswarningdanger | neutral | Colour on the shared status ramp; `neutral` is the plain badge. |
size | enumsmmdlg | md | Badge size |
dot | boolean | false | Show a colored dot indicator before the label |
dotPulse | boolean | false | Breathe the status dot, for a state that is still happening rather than one that has settled. Opacity only, and honours prefers-reduced-motion |
dotColor | string | Not set | Color for the leading status dot. Accepts any CSS color including CSS custom properties. |
icon | node | Not set | Optional icon element before the text |
active | boolean | false | Marks variant="ghost" as the currently selected filter. Has no effect on other variants. |
onRemove | function | Not set | Makes the badge removable. Called when X is clicked. |
announce | boolean | false | Opt into role="status" live announcement semantics |
role | union | Not set | — |
style | object | Not set | — |