Badge
Status: Experimental
Badge identifies a category or small piece of metadata. It is deliberately non-interactive, uses square geometry, and keeps semantic color subordinate to its visible text. Use Status when the label communicates a current operational state.
Preview
Section titled “Preview”Basic usage
Section titled “Basic usage”---import { Badge } from '@freightpx/frasto';---
<Badge tone="positive">Active</Badge>The application assigns domain meaning. Frasto does not assume that words such as pending or review always represent the same tone.
Variants
Section titled “Variants”subtleis the default for dense tables and metadata.outlineincreases definition without adding surface weight.solidis reserved for states that must remain prominent in a compact area.
All variants have a one-pixel border, no shadow, and no radius.
| Tone | Intended meaning |
|---|---|
neutral |
unassigned, inactive, invited, or ordinary metadata |
positive |
healthy, active, complete, or successful |
warning |
attention or review required |
danger |
blocked, failed, destructive, or high-risk |
info |
new or informational state |
Tone is supplemental. Keep the text explicit enough to communicate the state without color.
Use sm in tables and dense metadata rows. Use md when the badge appears beside standard body text or controls.
| Prop | Type | Default | Purpose |
|---|---|---|---|
tone |
'neutral' | 'positive' | 'warning' | 'danger' | 'info' |
'neutral' |
semantic color treatment |
variant |
'subtle' | 'outline' | 'solid' |
'subtle' |
visual emphasis |
size |
'sm' | 'md' |
'sm' |
badge height and spacing |
class |
string |
— | adds a consumer class |
Native span attributes, including role, aria-live, and data-*, are forwarded.
| Slot | Purpose |
|---|---|
| default | visible badge text |
icon-start |
optional decorative leading icon |
Accessibility
Section titled “Accessibility”- Do not rely on tone alone; use precise visible text.
Badgedoes not addrole="status"automatically because most badges describe static data.- Add
role="status"or an appropriate live region only when the badge changes in response to an operation and must be announced. - Do not use a badge as a button or link. Compose an actual interactive primitive when activation is required.
Responsive behavior
Section titled “Responsive behavior”Badges retain their intrinsic width and never stretch automatically. Long localized labels wrap when the available width is constrained instead of forcing page overflow. In constrained tables, keep the state column visible or provide the same state in the row’s mobile representation.