atom
gy-badge
Inline status pill used for labels, counts, and state tags; variant drives colour via status tokens and pill toggles rounded corners.
Live
What you ship.
variant="neutral"variant="info"variant="success"variant="warning"variant="danger"Markup
<gy-badge variant="success" size="md">running</gy-badge>Prop space
Tier
Tag
Variants
Sizes
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | Semantic colour. `neutral` is the default. |
size | 'sm' | 'md' | 'md' | Control density. `md` default; `sm` for dense tables/chips. |
pill | boolean | false | When true, uses fully-rounded corners (classic pill look). |
Slots: children.
Where this lives
import '@gyrum-labs/components/badge/badge.js';