Heading
Semantic heading with automatic level management.
Heading renders a semantic section heading. It reads its level from HeadingLevels context. Set
level to override it directly.
Section heading
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.
Top-level heading (h1)
Nested heading (h2)
Nested again (h3)
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>To read the current level in a custom heading-like component, use useHeadingLevel. Unlike a nested
HeadingLevels, 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.
Example heading
Example heading
Example heading
Example heading
Example heading
Example heading
Example heading
Related components
Use Text for prominent content that is not a section heading.
API
HeadingProps
HeadingProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
HeadingLevelsProps
Prop
Type
HeadingLevelsRenderProps
Prop
Type