Eyebrow
The small uppercase label that sits above a section heading. Locks in the DS mono-caps role (IBM Plex Mono · 12px · +1.5px tracking) and the inline icon layout, so every kicker across library pages stays on-system. Source: src/components/ds/ui/index.tsx.
Context
Toggle branding and select the library/category the eyebrow is nested within. When branded, the eyebrow takes that library's --color-lib-* token; when off, it falls back to a neutral tone.
query · section kicker
Tones
Neutral, accessible colors by default. Secondary is the standard choice.
Server-state manager
Server-state manager
Server-state manager
With icon
An optional leading icon — use Phosphor icons at 14px.
Why Query
Cache lifecycle
Brand accent
Library pages pass a brand color via className. The label-sm type role stays locked — only the color changes. (Pick a shade that clears text contrast; the lightest library brand tokens are not legible as small text on light surfaces.)
Server-state manager