Cadence Clinical
Primitives

Status

Shows the state something is in, such as "Referred" or "Cleared", as an icon and a word with no surface around it.

Unreleased

These changes are merged and will be in the next release of the packages.

  • MinorAdd Status, a state shown as an icon and a word with no surface, such as "Referred" or "Cleared". tone is neutral, info, success, warning or critical, and colours only the icon, with the status's text token, so the words keep their contrast on any row. The icon is passed as a child with data-icon, and the words say the state, so it is never shown by colour alone. It renders a span with data-slot="status" and data-tone, and takes Base UI's render.

Status code

How to install Status, its props, and how its tones use the status tokens.

Switch

Turns a setting on or off, and the change applies at once.