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.

When renderRoot owns the heading, use the callback's element and level state to return the resolved heading tag. This preserves automatic levels inside nested HeadingLevels contexts.

<Heading renderRoot={(domProps, { element: HeadingTag }) => <HeadingTag {...domProps} />}>
	Account settings
</Heading>

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.

Colour

Heading inherits the surrounding colour. Its color prop takes the same values as Text and reads the nearest Luke UI background the same way.

API

HeadingProps

HeadingLevelsProps