Chapter 2 — Components · Section 10
Badges & Pills
Badges and pills provide at-a-glance status, categorization, and count information. They come in 5 colors × 4 variants and 3 sizes. Every variant strictly follows the M3 locked pair rule — the foreground token is always the paired on-* for its background.
Color × Variant Matrix
5 colors × 4 variants. Tonal uses the container token (muted). Filled uses the brand token (saturated). Outline and ghost are for lower-emphasis contexts.
| Color | filled | tonal | outline | ghost |
|---|---|---|---|---|
| primary | primary | primary | primary | primary |
| secondary | secondary | secondary | secondary | secondary |
| tertiary | tertiary | tertiary | tertiary | tertiary |
| neutral | neutral | neutral | neutral | neutral |
| surface | surface | surface | surface | surface |
Dot Indicator Variant
A 6px dot inside the badge communicates the semantic state visually before reading the label. The dot color uses the paired on-* token for contrast.
Semantic Status Badges
Purpose-built combinations for course/content status. Each uses the correct locked-pair tokens.
Size Variants
Three sizes — xs for tight spaces, sm as default, md for prominent labeling.
Extra small
Small (default)
Medium
Pill Shape (rounded-full)
Use rounded-full pills for tags and chip-like read-only labels. The same color system applies.
Counter Pills
Read-only pills with a numeric count badge. Used for notification counts, result counts, and category totals.
In-Context Usage
Badges are never the only way to communicate status. Pair them with text labels and descriptive content.
Introduction to Systematic Theology
Dr. Elena Martinez
Biblical Greek: Year 1
Prof. James Chen
Apologetics in the Modern Era
Dr. Sarah Okonkwo
Accessibility
Status badges must not rely on color alone — always pair with a text label (WCAG 1.4.1). When a badge conveys dynamic information (e.g., unread count), wrap it in a role="status" or aria-live="polite" region so screen readers announce changes. The dot indicator is always aria-hidden="true" — it is decorative.