Heading

Heading allows you to show headings on the page & has a bigger line height than regular text.

Props

Component props
Name	Type	Default
`accessibilityLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| "none"`	-
	Allows you to override the default heading level for the given `size`.
`align`	`"start" \| "end" \| "center" \| "justify" \| "forceLeft" \| "forceRight"`	`"start"`
	`"start"` and `"end"` should be used for regular alignment since they flip with locale direction. `"forceLeft"` and `"forceRight"` should only be used in special cases where locale direction should be ignored, such as tabular or numeric text. See Align example for more details.
`children`	`React.Node`	-
`color`	`"default" \| "subtle" \| "success" \| "error" \| "warning" \| "shopping" \| "inverse" \| "light" \| "dark"`	`"default"`
	The color of the text. See Colors example for more details.
`id`	`string`	-
	A unique identifier for the element.
`lineClamp`	`number`	-
	Visually truncate the text to the specified number of lines. This also adds the `title` attribute if `children` is a string, which displays the full text on hover in most browsers. See Truncation example for more details.
`overflow`	`"normal" \| "breakWord"`	`"breakWord"`
	How truncation is handled when text overflows the line. See Truncation example for more details.
`size`	`"100" \| "200" \| "300" \| "400" \| "500" \| "600" \| "sm" \| "md" \| "lg"`	`600`
	The font size of the text. See Sizes example for more details. The sizes are based on our font-size design tokens. The "sm", "md", and "lg" values will soon be deprecated.

Example: Sizes

These font sizes follow those available through our Design Tokens. If your text does not need to be a semantic heading (H1-H6), use Text instead.

<Flex gap={4} direction="column">
  <Heading size="100">Heading size 100</Heading>
  <span lang="ja">
    <Heading size="100">こんにちは</Heading>
  </span>

  <span>
    <Heading size="200">Heading size 200</Heading>
  </span>
  <span lang="ja">
    <Heading size="200">こんにちは</Heading>
  </span>

  <Heading size="300">Heading size 300</Heading>
  <span lang="ja">
    <Heading size="300">こんにちは</Heading>
  </span>

  <Heading size="400">Heading size 400</Heading>
  <span lang="ja">
    <Heading size="400">こんにちは</Heading>
  </span>

  <Heading size="500">Heading size 500</Heading>
  <span lang="ja">
    <Heading size="500">こんにちは</Heading>
  </span>

  <Heading size="600">Heading size 600</Heading>
  <span lang="ja">
    <Heading size="600">こんにちは</Heading>
  </span>
</Flex>

<Flex gap={4} direction="column">
  <Heading size="100">Heading size 100</Heading>
  <span lang="ja">
    <Heading size="100">こんにちは</Heading>
  </span>

  <span>
    <Heading size="200">Heading size 200</Heading>
  </span>
  <span lang="ja">
    <Heading size="200">こんにちは</Heading>
  </span>

  <Heading size="300">Heading size 300</Heading>
  <span lang="ja">
    <Heading size="300">こんにちは</Heading>
  </span>

  <Heading size="400">Heading size 400</Heading>
  <span lang="ja">
    <Heading size="400">こんにちは</Heading>
  </span>

  <Heading size="500">Heading size 500</Heading>
  <span lang="ja">
    <Heading size="500">こんにちは</Heading>
  </span>

  <Heading size="600">Heading size 600</Heading>
  <span lang="ja">
    <Heading size="600">こんにちは</Heading>
  </span>
</Flex>

Example: Colors

<Box>
    <Box color="gray" padding={1}>
      <Heading color="inverse" size="500">
        Inverse
      </Heading>
    </Box>

  <Heading size="500">
    Default
  </Heading>

  <Heading color="subtle" size="500">
    Subtle
  </Heading>

  <Heading color="success" size="500">
    Success
  </Heading>

  <Heading color="error" size="500">
    Error
  </Heading>

  <Heading color="warning" size="500">
    Warning
  </Heading>

  <Heading color="shopping" size="500">
    Shopping
  </Heading>

  <Box color="primary" padding={1}>
    <Heading color="light" size="500">
      Light
    </Heading>
  </Box>

  <Box color="infoWeak" padding={1}>
    <Heading color="dark" size="500">
      Dark
    </Heading>
  </Box>
</Box>

<Box>
    <Box color="gray" padding={1}>
      <Heading color="inverse" size="500">
        Inverse
      </Heading>
    </Box>

  <Heading size="500">
    Default
  </Heading>

  <Heading color="subtle" size="500">
    Subtle
  </Heading>

  <Heading color="success" size="500">
    Success
  </Heading>

  <Heading color="error" size="500">
    Error
  </Heading>

  <Heading color="warning" size="500">
    Warning
  </Heading>

  <Heading color="shopping" size="500">
    Shopping
  </Heading>

  <Box color="primary" padding={1}>
    <Heading color="light" size="500">
      Light
    </Heading>
  </Box>

  <Box color="infoWeak" padding={1}>
    <Heading color="dark" size="500">
      Dark
    </Heading>
  </Box>
</Box>

Example: Overflow & truncation

<Box maxWidth={240} marginTop={-2} marginBottom={-2}>
  <Box paddingY={2}>
    <Text>breakWord (default):</Text>
    <Heading size="400" overflow="breakWord" >
      This is a long and Supercalifragilisticexpialidocious sentence.
      次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    </Heading>
  </Box>

  <Box paddingY={2}>
    <Text>normal:</Text>
    <Heading size="400" overflow="normal">
      This is a long and Supercalifragilisticexpialidocious sentence.
      次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    </Heading>
  </Box>

  <Box paddingY={2}>
    <Text>lineClamp:</Text>
    <Heading size="400" lineClamp={2}>
      This is a long and Supercalifragilisticexpialidocious sentence.
      次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    </Heading>
  </Box>
</Box>

<Box maxWidth={240} marginTop={-2} marginBottom={-2}>
  <Box paddingY={2}>
    <Text>breakWord (default):</Text>
    <Heading size="400" overflow="breakWord" >
      This is a long and Supercalifragilisticexpialidocious sentence.
      次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    </Heading>
  </Box>

  <Box paddingY={2}>
    <Text>normal:</Text>
    <Heading size="400" overflow="normal">
      This is a long and Supercalifragilisticexpialidocious sentence.
      次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    </Heading>
  </Box>

  <Box paddingY={2}>
    <Text>lineClamp:</Text>
    <Heading size="400" lineClamp={2}>
      This is a long and Supercalifragilisticexpialidocious sentence.
      次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    </Heading>
  </Box>
</Box>

Example: Alignment

<Box>
  <Heading align="start" size="400">Start-aligned heading (default)</Heading>
  <Heading align="end" size="400">End-aligned heading</Heading>
  <Heading align="center" size="400">Center-aligned heading</Heading>
  <Heading align="justify" size="400">Justify-aligned heading</Heading>
  <Heading align="forceLeft" size="400">Forced-left-aligned heading</Heading>
  <Heading align="forceRight" size="400">Forced-right-aligned heading</Heading>
</Box>

<Box>
  <Heading align="start" size="400">Start-aligned heading (default)</Heading>
  <Heading align="end" size="400">End-aligned heading</Heading>
  <Heading align="center" size="400">Center-aligned heading</Heading>
  <Heading align="justify" size="400">Justify-aligned heading</Heading>
  <Heading align="forceLeft" size="400">Forced-left-aligned heading</Heading>
  <Heading align="forceRight" size="400">Forced-right-aligned heading</Heading>
</Box>

Example: Levels

For accessibility purposes, we allow you to override the heading level. We should have one level 1 per page & levels should be appropriately nested. E.g. level 1 followed by level 2 & level 2 followed by level 2 or level 3. We also allow headings without an accessibility level.

<Box>
  <Heading size="500" accessibilityLevel={2}>
    Medium heading level 2
  </Heading>
  <Heading size="400" accessibilityLevel={3}>
    Small heading level 3
  </Heading>
  <Heading size="400" accessibilityLevel="none">
    Small heading without a level
  </Heading>
</Box>

<Box>
  <Heading size="500" accessibilityLevel={2}>
    Medium heading level 2
  </Heading>
  <Heading size="400" accessibilityLevel={3}>
    Small heading level 3
  </Heading>
  <Heading size="400" accessibilityLevel="none">
    Small heading without a level
  </Heading>
</Box>

Edit page on GitHub