/

/

HeadingLevel

A component that sets the heading level for its children. It doesn't render any HTML element, just sets the level prop on the context.

Code examples

<HeadingLevel>
  <Heading>Heading 1</Heading>
  <HeadingLevel>
    <Heading>Heading 2</Heading>
  </HeadingLevel>
</HeadingLevel>
<HeadingLevel>
  <Heading>Heading 1</Heading>
  <HeadingLevel>
    <Heading>Heading 2</Heading>
  </HeadingLevel>
</HeadingLevel>

Optional Props

`level`

HeadingLevels | undefined
HeadingLevels | undefined

The heading level. By default, it'll increase the level by 1 based on the context.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠