Components

Badge

Compact status and category labels with six semantic tones and an optional dot.

Badge labels status, counts, and categories inline.

Tones

Preview

NeutralAccentSuccessWarningDangerInfoWith dot

import { Badge } from '@officina/ui';

<Badge tone="success">Active</Badge>
<Badge tone="danger" dot>Failed</Badge>

Prop	Type	Default	Description
dot	boolean	—	Render a leading status dot in the current colour.
size	"sm" \| "md" \| null	—
tone	"neutral" \| "success" \| "warning" \| "danger" \| "info" \| "accent" \| "error" \| null	—	Alias of `variant`, kept for ergonomic status labelling.
variant	"neutral" \| "success" \| "warning" \| "danger" \| "info" \| "accent" \| "error" \| null	—	Semantic colour. `error` is accepted as an alias of `danger`.

StatusDot

Minimal tone-coded status dot with optional pulse.

Chip

Interactive, removable chips in five tones and three variants.