Badge

A compact label for status and classification. Color reinforces the meaning.

Interactive preview

Live specimenTry the component

DraftNewActiveIn reviewFailed

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add badge

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

React

<Badge variant="success">Active</Badge>
<Badge variant="warning">In review</Badge>

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`variant`	`neutral \| accent \| success \| warning \| danger`	`neutral`
`size`	`sm \| md`	`md`

Always include meaningful text. A badge is a label, not an interactive control. Announce status changes with a live region in the application.