Components
Badge
Token-driven pill badge / chip with semantic tones.
neutralprimarysuccesserrorwarninginfoneutralprimarysuccesserrorwarninginfo
Tones
neutral (default), primary, success, error, warning, info. Each maps
to the matching semantic color tokens, with an outline variant.
Usage
import { Badge } from '@cdz/ui';
<Badge>Draft</Badge>
<Badge tone="success">Active</Badge>
<Badge tone="error" outline>Failed</Badge>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
tone | neutral | primary | success | error | warning | info | neutral | Color tone |
outline | boolean | false | Transparent background, colored border |
All other native <span> attributes pass through; the component forwards its
ref.