Overline
The small caps label over a group: 12px uppercase on the low text tier. Every group heading in the product uses it. Source: src/components/ui/overline.tsx.
Default
A div with the caps role. It adds no margin; place it with className.
Recent
As a heading
asChild puts the style on a real heading, so the group shows up in the document outline and can label its section.
Pinned
In a sidebar
Over groups of nav rows, inset to the row's 14px padding so the text lines up.
Over a figure
A label over a single number. Keep figures tabular so they don't shift as they update.
Runs
1,284
Spend
$184.20
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Render the single child (an h2–h4, a menu label, a dt) with the overline style, via Radix Slot. |
| ...props | ComponentProps<"div"> | — | Native attributes pass through; className merges last. The style is text-label-12-caps text-foreground-low; spacing is the caller's. |
Best practices
When to use
- Over a group of things: cards, nav rows, menu items, a figure. Not over a single paragraph, and not as a page title.
Behavior
- Overline sets type and colour only. Spacing comes from the layout: mb-1 over rows, mb-3 over cards.
- Pair with a Badge text-label-12-caps when you need the same caps role inside a chip.
Accessibility
- Use asChild on an h2–h4 when the label starts a section; a plain div is invisible to the outline.
- Text is uppercased with CSS, so screen readers read the source casing. Write it in sentence case.
- The low text tier is for labels only; don't use Overline for content people must read.
Content
- One to three words. Write "Recent", not "RECENT"; the style does the caps.