Badge

A compact label for statuses, counts and metadata, with an optional live dot.

Data Display

DefaultSecondaryOutline Shipped

Playground

Tweak the props, the preview and the code follow.

Operational

Props

variant

label

dot

icon

<Badge variant="success" dot>Operational</Badge>

npx @plumsydev/plum-ui add badge

import { Badge } from "@/components/ui/badge"

<Badge variant="success" dot>Operational</Badge>

Tinted semantic variants with a pulsing dot.

OperationalDegradedOutageBeta

Badges pop in and out, and the rest reflow with layout animations.

frontendmotiona11y

Add a label

Prop	Type	Default
`variant` Visual style.	`"default" \| "secondary" \| "outline" \| "brand" \| "success" \| "warning" \| "destructive" \| "info"`	`"default"`
`dot` Prepends a pulsing status dot in the current color.	`boolean`	`false`
`asChild` Render as the child element, e.g. a link.	`boolean`	`false`