Component · Primitives
Badge
a small status indicator — an unread count, a short label ("AI"), or a bare presence dot.
Example
Playground
variant
Where available
✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|
| React | <Badge> | @design-foundry/lucent-react |
| Angular | <lucent-badge> | @design-foundry/lucent |
| Web Components | <lucent-badge> | @design-foundry/lucent-wc |
| Blazor | <LucentBadge> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|
| kind | count | label | dot | label | shape / content. |
| variant | accent | error | success | neutral | neutral | colour axis. |
| label | string | — | count / label text (ignored for dot). |