Heading

Heading

A semantic heading element.

The quick brown fox jumps over the lazy dog
<Heading>The quick brown fox jumps over the lazy dog</Heading>
View Source

API Reference

This component is based on the h1 element. Click here to see all the variants.

PropTypeDefault
asChildbooleanfalse
asenum?h1
sizeenum?6
weightlight | regular | medium | boldbold
alignleft | center | rightNo default value
colorenum?black
classNamestring?No default value

Examples

As another element

Use the as prop to change the heading level. This prop is purely semantic and does not change the visual appearance.


Level 1

Level 2

Level 3

<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>

Size

Use the size prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.


The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

<Flex direction="column" gap="3">
  <Heading size="xs">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="sm">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="md">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="lg">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="2xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="3xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="4xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="5xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="6xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="7xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="8xl">The quick brown fox jumps over the lazy dog</Heading>
  <Heading size="9xl">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

Align

Use the align prop to set text alignment.


Left-aligned

Center-aligned

Right-aligned

<Heading align="left">Left-aligned</Heading>
<Heading align="center">Center-aligned</Heading>
<Heading align="right">Right-aligned</Heading>

Color

Use the color prop to assign a specific color, ignoring the global theme. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.


<Flex direction="column">
  <Heading color="black">The quick brown fox jumps over the lazy dog</Heading>
  <Heading color="white">The quick brown fox jumps over the lazy dog</Heading>
  <Heading color="primary">The quick brown fox jumps over the lazy dog</Heading>
  <Heading color="destructive">
    The quick brown fox jumps over the lazy dog
  </Heading>
</Flex>
GridText