Components / Typography

Heading

Heading renders a semantic h1–h6. One prop — level — picks both the tag and a default size from the type scale, so the document outline and the visual hierarchy stay in step.

Loading playground…

What it is

A Text with as="h{level}" and a size default. The level prop maps to a fontSizes token — level 1 is $3xl, level 6 is $sm — and the component sets fontWeight: '$bold' and a tight lineHeight. Every default is overridable; pass fontSize or fontWeight yourself and yours wins.

The tag and the size are coupled by default but not welded. When the visual hierarchy and the document outline disagree — a visually small heading that is still an h2 for accessibility — override fontSize directly and leave level set for the correct tag.

Install

Heading is exported from usemotif. No separate install.

example.tsx

import { Heading } from 'usemotif';

API

Heading

stable

function Heading(props: HeadingProps): JSX.Element

level1 | 2 | 3 | 4 | 5 | 6= 2

Heading level. Renders the matching `h{level}` tag and sets a default font size from the type scale.

…TextPropsOmit<TextProps, "as">

Every Text prop except `as` — the tag is derived from `level`. Style props override the level defaults.

Examples

Page title:

example.tsx

<Heading level={1}>Dashboard</Heading>

Section heading with the default level:

example.tsx

<Heading>Recent activity</Heading>

Visually small but semantically an h2:

example.tsx

<Heading level={2} fontSize="$sm" color="$colors.text.muted">
Subsection label
</Heading>