Badge
Label, categorise or flag the status of an item with a compact, non-interactive marker.
Tones
default · secondary · outline · success · warning · info · destructive · danger
Status
Reach for the tonal variants to convey the state of a claim, request or member.
Inline with text
Sit a badge alongside body copy to annotate a heading or row without breaking the flow.
Claim HM-10641 Settled was processed on 21 July 2026.
Counts
Pair a badge with a label to surface a running total or unread count.
Open claims 12
Alerts 3
Props
Auto-generated from BadgeProps — the tone list stays in sync with the source.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "success" | "warning" | "info" | "destructive" | "danger" | null | undefined | — | — |
Table
Rows and columns for scannable, comparable data. Table is the static primitive; DataGrid wraps it with search, sorting, column visibility, paging and loading/empty states for operational lists.
CardDraft
A surface that groups related content and actions into a panel. The building block most dashboard layouts are made of.