Skip to content
Home

Heading (auto level)

Info
Demos
Properties

Demos

NB: All the demos do use <Heading.Level reset={1} .... This way every demo does reset the global level handling. You do not need that in your app.

Default headings

[h1] h1

[h2] h2

[h3] h3

[h4] h4

[h3] h3

[h2] h2

[h4] h4

<Heading.Level debug reset={1}>
  <Heading>h1</Heading>
  <Heading>h2</Heading>
  <Heading increase>h3</Heading>
  <Heading increase>h4</Heading>
  <Heading decrease>h3</Heading>
  <Heading level="2" size="x-large">
    h2
  </Heading>
  <Heading skipCorrection level={4}>
    h4
  </Heading>
</Heading.Level>

Heading level context

[h1] h1

[h2] h2

[h3] h3

[h3] h3

[h3] h3

[h2] h2

[h2] h2

[h3] h3

[h3] h3

<Heading.Level debug reset={1}>
  <Heading>h1</Heading>
  <Heading>h2</Heading>

  <Heading.Increase>
    <Heading>h3</Heading>
    <Heading>h3</Heading>
  </Heading.Increase>

  <Heading inherit>h3</Heading>

  <Heading.Decrease inherit>
    <Heading>h2</Heading>
    <Heading>h2</Heading>
    <Heading increase>h3</Heading>
    <Heading>h3</Heading>
  </Heading.Decrease>
</Heading.Level>

Level isolation

[h1] h1

[h2] h2

[h2] h2

const App = () => {
  const [showHeading, setShowHeading] = useState(false)
  return (
    <Heading.Level debug reset={1}>
      <Heading>h1</Heading>
      <Heading>h2</Heading>

      <Heading.Increase>
        <ToggleButton
          text="Toggle h3"
          checked={showHeading}
          onChange={() => setShowHeading((c) => !c)}
        />
        {showHeading && (
          <>
            <Heading>h3</Heading>
            <Heading>h3</Heading>
            <Heading>h3</Heading>
          </>
        )}
      </Heading.Increase>

      <Heading.Level>
        <Heading>h2</Heading>
      </Heading.Level>
    </Heading.Level>
  )
}
render(<App />)

Combine with manual heading

[h1] h1

[h2] h2

Increase to h3

[h3] h3

<Heading.Level debug reset={1}>
  <Heading>h1</Heading>
  <Heading>h2</Heading>

  <H3 level="use">Increase to h3</H3>
  <Heading>h3</Heading>
</Heading.Level>

Prose max width

The proseMaxWidth property allows you to limit the width of heading text based on character count, creating optimal reading line lengths:

This is a regular heading without any width constraints. It will extend to the full width of its container.

This heading uses proseMaxWidth=40 to limit its width to approximately 40 characters.

This heading uses proseMaxWidth=20 for an even narrower reading width.

This heading uses proseMaxWidth with its default value.

<Heading.Level reset={3}>
  <Heading>
    This is a regular heading without any width constraints. It will extend
    to the full width of its container.
  </Heading>
  <Heading proseMaxWidth={40}>
    This heading uses proseMaxWidth={40} to limit its width to
    approximately 40 characters.
  </Heading>
  <Heading proseMaxWidth={20}>
    This heading uses proseMaxWidth={20} for an even narrower reading
    width.
  </Heading>
  <Heading proseMaxWidth>
    This heading uses proseMaxWidth with its default value.
  </Heading>
</Heading.Level>

Using Typography.Context

Use Typography.Context to apply proseMaxWidth to multiple headings at once:

This heading is inside a Typography.Context with proseMaxWidth=40

This heading overrides the provider with proseMaxWidth=20