Skip to main content

Heading

Examples

Basic Heading

View standalone

The correct HTML element will be inferred from the provided level. If a text element needs to be a heading for accessibility purposes, but cannot use a heading tag (h1, h2, etc.), it can be assigned role="heading" and aria-level="[Level of Heading]" (e.g. aria-level="2").

My Heading

Code
<Heading level={1}>
  My Heading
</Heading>

Heading as Alternative Element

View standalone

<Heading> also accepts an as prop if it needs to be rendered as another element.

My Heading

Code
<Heading
  as="p"
  level={1}
>
  My Heading
</Heading>

Colored Heading

View standalone

My colored heading

Code
<Heading
  color="brand-secondary"
  level={2}
>
  My colored heading
</Heading>

Heading Levels

View standalone

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Code
<>
  <Heading level={1}>
    Heading Level 1
  </Heading>
  <Heading level={2}>
    Heading Level 2
  </Heading>
  <Heading level={3}>
    Heading Level 3
  </Heading>
  <Heading level={4}>
    Heading Level 4
  </Heading>
  <Heading level={5}>
    Heading Level 5
  </Heading>
</>

Input Ref

View standalone

Passing an inputRef.

I'm a heading with a yellow background

Code
<Heading
  inputRef={{
    current: '[Circular]'
  }}
  level={1}
>
  I'm a heading with a yellow background
</Heading>

Props

as

ElementType<any>

Renders as another element if specified, defaults as heading with heading level provided by `level` prop

level

HeadingLevel

Renders the element as heading with specified level

color

"brand-secondary" | "global-primary"

Text color

Default: "global-primary"

inputRef

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509