Badge
A non-interactive status label with independently themed status and market roles.@gemologic/sheen · data displayPlayground
Healthy
<Badge tone="success" size="sm" tone="neutral" variant="soft">Healthy</Badge>Variant matrix
Badge example
Healthy
tone: neutral
Healthy
tone: accent
Healthy
tone: info
Healthy
tone: success
Healthy
tone: warning
Healthy
tone: danger
Healthy
tone: market-up
Healthy
tone: market-down
Healthy
tone: market-flat
Healthy
variant: soft
Healthy
variant: solid
Healthy
variant: outline
Healthy
size: sm
Healthy
size: md
Healthy
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Status.tsx- Tokens
--sheen-text-caption-size--sheen-color-success-fg--sheen-color-success-subtle
Accessibility
Role: status label, not an automatic live regionKeyboard: No component-owned keysDo
- Use visible text as well as color to communicate meaning.
Do not
- Do not use Badge as a button or make every badge a live region.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
tone | StatusTone | neutral | Semantic status or market role, independent of the selected accent. |
variant | "soft" | "solid" | "outline" | soft | Soft fill, solid fill, or outline treatment. |
size | "sm" | "md" | sm | Density-aware label size. |