Badge

Composition preview

Try Badge alongside its related data & surfaces components. These examples keep all actions local.

Usage

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

<>
<Badge variant="secondary">Draft</Badge>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

variant: default, secondary, destructive, outline, ghost, link; asChild

Usage & accessibility

Use words as well as color. Ordinary status can remain plain text; avoid making every value a badge.

Implementation contract

src/components/ui/badge.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.