Foundation

Badge

Compact labels for status, counts, and categories, with soft status variants and an optional dot.

StableUsed in Aback Tools, Aback Launch, Aback GroupRegistry JSON

DefaultSecondaryOutlineBrandMuted

DeployedPending reviewAction required

LiveBetaBuildingPlannedArchived

registry:uiv0.1.0

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add badge

Writes components/ui/badge.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Badge. Native element props pass through.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "brand" \| "success" \| "warning" \| "danger" \| "info" \| "destructive" \| "muted"`	"secondary"	Semantic label style. Success, warning, danger, and info are soft status surfaces; destructive is a solid fill.
`dot`	`boolean`	false	Leads with a small square dot in the badge colour, for live, beta, and planned states. It is decorative.
`className`	`string`	None	Use for a mono registry type or similar metadata treatment.

Dependencies: class-variance-authority, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

A badge is a label, not a control. It has no hover state and no keyboard behavior.
Keep the text meaningful without the color, since color is supplementary.
For a status that changes, wrap the badge in a live region or pair it with visible text.
Do not put an icon-only badge in place of a labeled action.

The Aback products whose interfaces shaped this component.