Status Pill — Cayuse Design System

Examples

The seven colours

Unsubmitted In development Under review Awaiting certification Requires changes Approved Custom label

html

<span class="cds-status-pill cds-status-pill--blue">Under review</span>
<span class="cds-status-pill cds-status-pill--green">Approved</span>
<span class="cds-status-pill cds-status-pill--orange">Requires changes</span>

In context

Proposal 24-0118

Requires changes

Figma properties

Property	Values	Notes
`Color`	Blue · Green · LightBlue · Orange · Yellow · Gray · Custom	Seven fills, each with a defined meaning.
`Label`	Approved · Awaiting Certification · Awaiting Org Approval · Pending · Reopened · Requires Changes · Submitted · Under Post Review · Under Pre-Review · Under Review · Unsubmitted · In Development · Set Up In Progress · In Review · Active · Funded · Submitted to Sponsor · Under Consideration · In Closeout · Closed · Review Complete · Custom Label	Twenty-two standard labels, plus a custom slot.

The Figma page instructs: “Select the status pill from the list below. You can choose by either the Label (the displayed text) or by the colour.” The two are paired deliberately — pick the label, and the colour follows.

Original Figma description & what changed

From Figma: Status Pills should be next to a component or text that it describes the status of. The most common usage is a page title (which describes the name of a Study or Project). Status Pills can also be used in tables to describe the status of a work in the table. The labels and the color correspond with each other to give the user information about the current progress.

What changed: Kept the placement rules and the label/colour pairing, which are the substance. Tightened the prose, and added the two things the original omits: that colour must never be the only signal (the reason the label is mandatory), and the boundary against Data Pill, which looks similar and means the opposite.

Colour meanings

Colour	Meaning	Typical labels
Gray	Not yet started; no action required	Unsubmitted, Closed
Light blue	In progress; no action from this user	In development, Set up in progress
Blue	Under review by another party	Under review, Under pre-review, Under consideration
Yellow	Waiting on someone else; informational	Awaiting certification, Awaiting org approval, Pending
Orange	Needs this user’s attention now	Requires changes, Reopened
Green	Complete, approved or funded	Approved, Active, Funded, Review complete
Custom	A product-specific state with no standard equivalent	Custom label

Usage

When to use it

Place it beside the thing whose status it describes — the page title, or a table cell.
Use the standard label where one fits. A new label means a new workflow state, which is a product decision.
Keep the label short enough to sit on one line beside a title.
Use the colour that matches the meaning, not the colour that looks good in the layout.

When not to use it

Do not use a status pill for a value the user selected — that is a Data Pill.
Do not make a status pill interactive. It reports; it does not act.
Do not invent a new colour; the seven have assigned meanings and an eighth dilutes all of them.
Do not use colour alone. The label is not optional.

Accessibility

Orange requires dark text

White on status/Orange measures 3.17:1, below the 4.5:1 needed for 12px bold text. Black on the same orange measures 5.96:1. This library sets .cds-status-pill--orange to --status-text-dark; the Figma component should be updated to match. See the audit.

The label is real text, so the status is available to screen readers without extra markup. This is the reason colour alone is never acceptable.
Inside a table, the pill sits in a Status column so the header names what it means.
Beside a page title, keep the pill outside the <h1>.
When a status changes on-screen, announce it politely.

Tokens consumed

Token	Applied to	Resolves to
`--status-blue` … `--status-custom`	Pill fills	The seven `--color-status-*` primitives
`--status-text-light`	Label on dark fills	`--color-white`
`--status-text-dark`	Label on light fills	`--color-black`
`--radius-20`	Pill radius	20px