Data Pill — Cayuse Design System

Examples

Pills in a filter

Sponsor: NIH Status: Under review Awaiting approval

html

<span class="cds-data-pill">
  Sponsor: NIH
  <button type="button" class="cds-data-pill__remove"
          aria-label="Remove filter: Sponsor NIH">✕</button>
</span>

<!-- A value entered but not yet confirmed -->
<span class="cds-data-pill cds-data-pill--pending">Awaiting approval</span>

Figma properties

Property	Values	Notes
`Pill Type`	Default · Text Entry · Pending Approval	Default is a confirmed value; Text Entry is a value being typed; Pending Approval is entered but not yet accepted. (The Figma variant is spelled “Prending Approval”.)

Usage

When to use it

Use to show values already selected in a filter or multi-select field.
Include the field name in the pill where the context is not obvious — “Sponsor: NIH” beats “NIH”.
Give every removable pill a remove control.
Show pending values in the pending style so the user can tell what is confirmed.

When not to use it

Do not use as a status indicator — that is a Status Pill. Data Pills are values the user chose; Status Pills are states the system assigned.
Do not use for a single-value field; just show the value.
Do not let pills overflow their container — wrap them.
Do not remove a pill without any way to undo, where re-finding the value is laborious.

Data Pill and Status Pill are different components

They look similar and mean opposite things. A Data Pill is something the user put there and can take away. A Status Pill is something the system is telling them and they cannot change. Giving a Status Pill a remove button, or styling a Data Pill in status colours, teaches users the wrong thing about both.

Accessibility

Each remove button needs a label naming what it removes — “Remove filter: Sponsor NIH”. A row of buttons all called “Remove” is unusable from a screen-reader element list.
After removing a pill, move focus somewhere sensible — the next pill, or the field — and announce the removal.
The ✕ glyph is decorative; the accessible name carries the meaning.

Tokens consumed

Token	Applied to	Resolves to
`--color-blue-100`	Default fill	`#e1eaf8`
`--primary-brand-color`	Default border	`#0076b6`
`--color-gray-100`	Pending fill	`#f5f5f5`
`--icon-accent-4`	Remove glyph	`--color-gray-500`