Status
An 8px dot in one of the five feedback colors. A Bones component (Base UI has no such part), and the smallest one: it names itself for screen readers when it stands alone, and steps aside when text next to it already says the state.
Playground
Change the color and toggle the label to see how the dot presents itself to assistive tech; the Code tab shows the markup.
Variants
Neutral, success, info, warning, and danger, straight from the feedback tokens. Color alone is never the whole message: pair the dot with a word, or give it a label.
Styling states
The color is a data attribute and the fills are the feedback tokens, so a theme recolors every dot; the Badge renders the same element before its label:
.ub-status[data-color="success"] {
box-shadow: 0 0 0 0.125rem var(--ub-tint-green-bg);
}Props
Everything a span accepts passes through, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
color | "neutral" | "success" | "info" | "warning" | "danger" | "neutral" | Which feedback color the dot shows. |
label | string | – | Names the dot for screen readers (role img) when it stands alone; without it the dot is aria-hidden. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Status, from @usebones/react.
- One part, an 8px dot: <Status color="success" label="Online" />. color "neutral" (default) | "success" | "info" | "warning" | "danger".
- Standing alone it needs label (it becomes role="img" with that name). Beside text that already says the state, omit label and the dot is aria-hidden; Badge's status prop does exactly that.
- Never let color be the only signal.
- Restyle in CSS via .ub-status and [data-color]; fills are --ub-success, --ub-info, --ub-warning, --ub-danger, neutral is --ub-text-tertiary. Tokens only.