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.

Example: Colors

Example: Overflow & truncation

Example: Alignment

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.