Status · §5.9

Status pill

A state in tone, icon and words, from the domain maps.

Variant

Size

Theme

Contrast

Language

Motion

Text size

tones · subtle

neutralinfoprogresshighlightsuccesswarningdanger

visitStageStatus

Checked inWaiting to be seenTests under wayResults back: waiting to see your care team againTreatment and monitoringWaiting for a specialistGetting ready to go homeMoving to another hospitalStaying in hospital: waiting for a bedLeft the department

testStageStatus

BackBeing readCollectedDoneIn the labOrderedScanScheduled

requestStatusStyle

SentSeen by your care teamSeen by your care teamDoneCancelled

codeSeverityStatus (staff)

advisoryurgentcritical

Code

<StatusPill encoding={visitStageStatus.tests_in_progress} label={t("stage.tests_in_progress.label")} />

Accessibility

Never colour alone: tone, icon and label.
Labels wrap instead of truncating.

Usage

Read tones from visitStageStatus, testStageStatus, requestStatusStyle.

Don't

Don't pick a tone ad hoc: use the domain map.
At most one solid pill per row.

Platforms

Web: apps/web/components/edflow/status-pill.tsx, apps/web/components/edflow/icon.tsx, apps/web/components/edflow/icon-map.ts
iOS: SwiftUI capsule Label
Android: Compose AssistChip styled from tokens