Badge
Compact labels with contrast and a limited set of variants.
New
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add badgeDependencies
What add badge installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
1 examples · 1 componentVariants with a purpose
Only the variants you need, with contrast.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
variantStyle and visual intent. | "default" | "secondary" | "outline" | "destructive" | "default" |
Accessibility
Color is not the only indicator: the badge text communicates the state.
If it represents a dynamic state, pair it with text or an aria-label in its context.