Primitives
Status
Shows the state something is in, such as "Referred" or "Cleared", as an icon and a word with no surface around it.
Neutral
The default, for a state that is not a status.
import { Status } from "@cadence-clinical/ui";
import { Minus } from "lucide-react";
<Status>
<Minus aria-hidden data-icon="inline-start" />
Not needed
</Status>;Tones
Each tone colours its icon with one of the fixed status colours. Each state has its own icon.
<Status tone="warning">
<Clock aria-hidden data-icon="inline-start" />
Referred
</Status>Several in a cell
Put the abbreviation first and the icon after it with data-icon="inline-end". One button holds the tooltip with the states in words, so the cell is one tab stop, and its name says all three.
import { Status, Tooltip, TooltipContent, TooltipTrigger } from "@cadence-clinical/ui";
import { CircleCheck, Clock, Minus } from "lucide-react";
<Tooltip>
<TooltipTrigger
render={<button type="button" />}
aria-label="Allied health: PT cleared, SW referred, OT not needed"
className="inline-flex gap-2 rounded-sm"
>
<Status tone="success">
PT
<CircleCheck aria-hidden data-icon="inline-end" />
</Status>
<Status tone="warning">
SW
<Clock aria-hidden data-icon="inline-end" />
</Status>
<Status>
OT
<Minus aria-hidden data-icon="inline-end" />
</Status>
</TooltipTrigger>
<TooltipContent>PT cleared, SW referred, OT not needed</TooltipContent>
</Tooltip>;