StatusBadge
A state rendered as a contained badge, for page headers and toolbars where plain tinted text would not stand out.
Component behavior
StatusBadge displays status text in a bordered or filled label. StatusText displays the status inline without a badge container.
The dot is present in every variant: tone alone is a color, and a color alone is not a status for a reader in grayscale or with a red/green deficiency.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | ToneProp | "neutral" | Any tone, or an alias. |
variant | "subtle" | "outline" | "solid" | "subtle" | Subtle uses a tinted background. Outline uses a border without a fill. Solid uses a filled background. |
size | "sm" | "md" | "md" | sm suits a table row; md matches control height. |
dot | boolean | true | Leading dot. Suppressed automatically when an icon is given. |
pulse | boolean | — | Animates expanding rings around the dot. Ignored when an icon is supplied. |
icon | ReactNode | — | Replaces the dot. |
count | ReactNode | — | Trailing figure the state applies to, set off by a rule. |
children | ReactNode | — | The state, in one or two words. |
Examples
Tones and counts
Live
pulse animates expanding rings around the dot. Reserve animation for states that are changing.
Variants
Beside a control
md is the same height as a small Button, so a badge and an action sit on one optical line.
Small
import { StatusBadge } from "@solarius/onset";
import type { StatusBadgeProps } from "@solarius/onset";