Data Display
Pill
Compact label for status, category, or metadata. Six fill colors, always fully rounded.
Pill is a static, non-interactive label — for tagging a course by category, showing a status word, or surfacing a bit of metadata inline with other content. In the source file it's used for course-category chips (phonics, vocabulary, comprehension) and similar short tags.
Pill is not a button and not a form control. If you need something clickable, use Button instead; if you need a selectable segmented control, use Tab / Tab Group.
Six colors are available. Five are flat, high-contrast fills meant to sit on a plain background; White is the one variant with a border and subtle inner shadow, meant for use on colored or busy surfaces where a flat fill wouldn't stand out.
- Use Pill for short, glanceable labels — a category, a status word, a count.
- Reach for White when a pill needs to sit on a colored or busy background and the six brand colors would clash.
- Keep label text to one or two words; Pill doesn't wrap or truncate.
- Don't use Pill as a button — it has no built-in interactive or focus state. Use Button or Tab for anything clickable.
- Don't rely on color alone to convey meaning (e.g. red = error) without also stating it in the label — colors here are categorical, not semantic/feedback colors.