Heading renders a semantic section heading. It reads its level from HeadingLevels context without advancing it. Set level to override it directly.

Heading level

Set base on the root HeadingLevels. Each nested HeadingLevels advances the next heading level. This keeps the document outline aligned with the component structure.

Use level to override the context for one heading. It does not change the level for siblings or children.

<Heading level={2}>Explicit h2</Heading>

Outside HeadingLevels, Heading falls back to h2. Nested contexts cap at h6.

To read the current level in a custom heading-like component, use useHeadingLevel. Like Heading, it does not advance the level.

Do not skip levels, such as an h2 followed by an h4. Someone who uses a screen reader navigates a page by heading level.

Typography

By default, Heading maps h1–h4 to heading1–heading4, h5 to lead, and h6 to body, and uses the heading font-weight role. Set typography to change the visual style without changing the semantic level. Use display for oversized marketing-style headings.

API

HeadingProps

HeadingLevelsProps

HeadingLevelsRenderProps