StatusBadge
A status in one of five generic tones, as a pill or as a dot, with the word always visible.
Status shows a status: draft, sent, failed. Your application maps its own statuses to one of
five generic tones; the badge shows the word in that tone, as a tinted pill or, in dense lists, as a
dot beside the word. It is a Badge with a fixed tone axis.
- Draft
- Scheduled
- Sent
- Waiting for approval
- Failed
- Draft
- Scheduled
- Sent
- Waiting for approval
- Failed
// apps/docs/examples/ui/status-badge.tsximport { StatusBadge, type StatusTone,} from '@workspace/active-ui/components/composed/status-badge';
// A domain status mapped to a generic tone: the mapping is the application's.const STATUSES: {label: string; tone: StatusTone}[] = [ {label: 'Draft', tone: 'neutral'}, {label: 'Scheduled', tone: 'info'}, {label: 'Sent', tone: 'success'}, {label: 'Waiting for approval', tone: 'warning'}, {label: 'Failed', tone: 'danger'},];
/** * The five tones, as a pill to scan and as a dot for dense lists. The word * carries the meaning; the colour supports it. */export default function StatusBadgeExample() { return ( <div className="grid gap-6 sm:grid-cols-2"> <ul className="grid justify-items-start gap-2" aria-label="Soft"> {STATUSES.map((status) => ( <li key={status.tone}> <StatusBadge tone={status.tone}>{status.label}</StatusBadge> </li> ))} </ul> <ul className="grid gap-2" aria-label="Dot"> {STATUSES.map((status) => ( <li key={status.tone}> <StatusBadge tone={status.tone} appearance="dot"> {status.label} </StatusBadge> </li> ))} </ul> </div> );}What the composition adds#
Five tones:
neutral,info,success,warninganddanger. There is nopending: a wait without action needed isneutral, a wait that needs attention iswarning.Readable text in every tone: the text uses the deeper
--tone-colours, which reach AA on the tinted fill in both modes; the dot uses the full colour, which meets the 3:1 for shapes.* Two appearances:
soft(default), a pill to scan;dot, plain text with a coloured dot for rows that all carry the same status axis.
Usage#
import {StatusBadge} from '@workspace/active-ui/components/composed/status-badge';
<StatusBadge tone="success">Sent</StatusBadge><StatusBadge tone="danger" appearance="dot">Failed</StatusBadge>What your application provides#
The mapping from its statuses to tones, and the translated word: the badge never shows colour without a word.
A live region around the badge if its value changes after an action and should be announced.
Accessibility#
The badge has no role: it is text, read in place. The dot is hidden from assistive technology, since the word beside it carries the meaning.
API#
Import from @workspace/
Props
- Type
ReactNode
The translated label. Required: colour must never be the only carrier of meaning (WCAG 1.4.1), and this component does not translate itself.
- Type
StatusTone
The generic UI tone. Mapping from a domain status is the caller's job.
- Type
"dot""soft"- Default
'soft'
"soft" (default) is a pill with a tinted fill: the shape for a status that stands on its own and needs to be scanned.
"dot" is a coloured dot with plain text next to it, without a pill. Intended for dense lists in which every row carries the same status axis; there pills together would take too much visual weight.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Types
The five generic status tones.
This is UI semantics, not domain semantics. active- does not know what LAPSED or PENDING_ means; the caller decides which domain status maps to which tone, just as active-grid does for labels with meta..
There is deliberately no pending tone. "Pending" is a state in time and not a judgement about the outcome, and the name would clash with domain values such as PENDING_. The convention for pending statuses:
- waiting without attention or action needed →
neutral - waiting with attention or action needed →
warning
type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';The props of Status, each described in its prop list on this page.
interface StatusBadgeProps
extends React.ComponentProps<'span'>, VariantProps<typeof softToneClasses> {
tone: StatusTone;
appearance?: 'soft' | 'dot';
children: React.ReactNode;
}