Overline
A short monospace label set above or beside the thing it names — a section caption, a table header, a status eyebrow. Uppercase, letter-spaced and muted.
Import
import { Overline } from "@mikenotthepope/substrateui"It carries no semantics
An overline is a typographic treatment, not a role. It renders a span by default; use render to make it whatever the surrounding document actually needs — an h3 when it genuinely heads a section, a p inside a card, a dt in a description list.
Reaching for it as a heading substitute is the mistake to avoid. If it looks like a section title, it probably belongs in the document outline, and a styled span is invisible to anyone navigating by heading.
Sizes
2xsis 11px, one step below where Tailwind's scale stops. It exists because
text-[11px] to get it. Each size pairs its own line-height, so leading arrives with the size rather than being inherited from whatever the label happens to sit inside — which is the difference between this step and the arbitrary value, and why Badge has not moved onto it yet.Where it already is
Divider, Timeline, Table, StatCard, FooterBlock and Badge all use this treatment. Before it had a name they used four different sizes and three different weights between them — so a table header and a timeline label, which are the same thing on the page, were not the same thing in the code.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "2xs" | "xs" | "sm" | "xs" | 11px, 12px or 14px. Each carries its own line-height. |
render | ReactElement | — | Render a different element, keeping the styling. |
className | string | — | Merged over the variant classes, so colour and weight can be retuned. |
children | ReactNode | — | The label text. |