Status chip

A compact, persistent label for the state of one thing. It never interrupts, never demands a response, and — because it borrows the alarm palette — is the component most easily misused into meaning something it does not.

Overview

A status chip states what something is. An Alert Banner states what has changed and asks for a response. The distinction matters because they can carry identical colours, and a clinician who learns to scan past chips will scan past a banner rendered to look like one.

The rule that keeps them separable: a chip is never the first place a clinician learns something urgent. It echoes a state established elsewhere — in a worklist row, on a card, beside a value. If a chip is carrying news, it should have been a banner.

Anatomy & variants

Chips go stale

Because a chip echoes state held elsewhere, it can be wrong in a way a banner cannot — the underlying condition changes and the chip continues to assert the old value. In a queue rendered once and left on a screen for twenty minutes, that is a silent use error.

• A chip is re-rendered from source, never cached across a poll.
• Where the source cannot be reached, the chip says so — it degrades to quiet with the word "Unknown", never to its last known value.
• Priority chips carry the same timestamp discipline as their alarm. If the row shows a time, that time belongs to the state the chip is displaying.

Chips are not buttons

A status chip is text. It is not a control, it does not respond to hover, and it is not focusable. The one exception is a filter chip — a genuine toggle that removes rows from view — and that is a different component with different rules, because anything that hides a patient is subject to the disclosure requirements in Data grid.

• Never make a status chip dismissible. Dismissing a state does not change it, and a clinician who can clear "Critical" from a row has been given a control that lies.
• Never put the only route to detail on a chip. The row or card is the target; the chip rides along inside it.

Writing the label

• One or two words. Three is a sign the chip is doing a sentence's job.
• A state, not an instruction. "Awaiting serial ECG", not "Order serial ECG".
• Never truncate. A chip that does not fit gets a shorter word, a wider column, or wraps to the next line — never an ellipsis. A truncated state is a wrong state.
• Match the alarm vocabulary exactly where echoing priority. "Critical", not "High" or "Urgent-1". Divergence between a chip and its banner is a defect.
• Budget 35 % for translation — chips are the first thing to break in German.

In context

Do's and don'ts

Accessibility

• The word is the accessible name. Never a coloured dot with a title; never an icon alone.
• Not focusable and not a live region. A chip changing does not announce — the state change that caused it announces, from its own source.
• Survives greyscale and forced-colours. Verified by rendering monochrome; neutral and quiet are distinguished by border, not fill.
• Uppercase is styling, not content. Use text-transform so screen readers receive normal casing rather than an initialism.
• Contrast. Every chip fill meets AA against its foreground — the same computed pairs as the alarm palette.

Outcomes of use

What this contributes to, in the terms of Usability & context of use. These are attributes believed to contribute to an outcome; the outcome itself is settled by observing real use in a specified context, not by this page.

• Effectiveness — the state a clinician reads off a row is the state that is actually true right now. Staleness is the failure mode this component owns.
• Efficiency — state readable without opening the record, which is the entire point of a queue; every chip that cannot be trusted forces a click.
• Satisfaction — the alarm palette keeps its meaning. Every process chip that borrows amber costs a little of the trust the real amber depends on.

Clinical safety notes

• Alarm hues reserved for echoed alarm state. Mitigates: dilution of the IEC palette by workflow status, and consequent loss of alarm salience.
• Chips never originate a clinical signal. Mitigates: urgent information arriving in a component clinicians have learned to scan past.
• Never truncated. Mitigates: a partial word being read as a different state.
• Degrade to "Unknown", never to last-known. Mitigates: stale state presented as current when a source is unreachable.
• Not dismissible, not focusable. Mitigates: a clinician believing they have changed a state by clearing its label.
• Vocabulary matched to the alarm layer. Mitigates: two names for one priority across a product.

Implementation

$ npx shadcn@latest add https://md.notjustany.tech/r/status-chip.json

const statusChipVariants = cva(
  "inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 " +
  "text-xs font-bold uppercase tracking-wide whitespace-nowrap",
  {
    variants: {
      status: {
        // alarm echoes — require `alarmRef`
        critical: "bg-alarm-critical text-alarm-critical-foreground",
        urgent:   "bg-alarm-urgent text-alarm-urgent-foreground",
        advisory: "bg-alarm-advisory text-alarm-advisory-foreground",
        info:     "bg-alarm-info text-alarm-info-foreground",
        ok:       "bg-alarm-ok text-alarm-ok-foreground",
        // process state — no clinical meaning, no clinical colour
        neutral:  "bg-muted text-foreground border-input",
        quiet:    "bg-transparent text-muted-foreground border-input",
      },
    },
    defaultVariants: { status: "neutral" },
  }
)

// An alarm hue may only be spent on an actual alarm.
const ALARM_STATUSES = ["critical", "urgent", "advisory"] as const

if (ALARM_STATUSES.includes(status) && !alarmRef) {
  throw new Error(
    "[StatusChip] alarm statuses require `alarmRef` — the alarm this chip echoes. " +
    "Use status=\"neutral\" for process state."
  )
}

Related

• Alert Banner — for anything that is news rather than state.
• Data grid — the most common host.
• Card — chips in a card header describe the card's subject.
• Colour — why the alarm hues are governed.