The Heading component is used for displaying titles and section headings throughout your application. It provides consistent typography with various sizes, weights, and styles to establish visual hierarchy.

Heading

Heading 1

Heading 2

Heading 3

Heading 4

<Heading variant="heading-strong-xl">
  Heading 1
</Heading>
<Heading variant="heading-strong-l" as="h2">
  Heading 2
</Heading>
<Heading variant="heading-strong-m" as="h3">
  Heading 3
</Heading>
<Heading variant="heading-strong-s" as="h4">
  Heading 4
</Heading>

Variants

Heading components can be styled using the variant prop which combines font type, weight, and size.

Variants

Display Strong XL

Display Strong L

Display Strong M

Display Strong S

Display Strong XS

Display Default XL

Display Default L

Display Default M

Display Default S

Display Default XS

Heading Strong XL

Heading Strong L

Heading Strong M

Heading Strong S

Heading Strong XS

Heading Default XL

Heading Default L

Heading Default M

Heading Default S

Heading Default XS

<Heading variant="display-strong-xl">
  Display Strong XL
</Heading>
<Heading variant="heading-default-m">
  Heading Default M
</Heading>

Font family

You can override the default font-family that comes with the variant with the family prop.

Font family

Display Strong M, but monospace

<Heading variant="display-strong-m" family="code">
  Display Strong M, but monospace
</Heading>

Font weight

You can override the default font-weight inside a variant with the weight prop.

Font weight

Heading Strong XL, but this is default

<Heading variant="heading-strong-xl">
  Heading Strong XL, <Text weight="default">but this is default</Text>
</Heading>

Colors

Headings can be styled with different colors using the onBackground or onSolid props.

Colors

Brand medium

Accent medium

Danger weak

Success weak

<Heading onBackground="brand-medium">
  Brand medium
</Heading>
<Heading onBackground="accent-medium">
  Accent medium
</Heading>
<Heading onBackground="danger-weak">
  Danger weak
</Heading>
<Heading onBackground="success-weak">
  Success weak
</Heading>

Opacity

Control heading visibility with the opacity prop, accepting values from 0 to 100.

Opacity

Opacity 100

Opacity 70

Opacity 40

Opacity 10

<Heading opacity={100}>
  Opacity 100
</Heading>
<Heading opacity={70}>
  Opacity 70
</Heading>
<Heading opacity={40}>
  Opacity 40
</Heading>
<Heading opacity={10}>
  Opacity 10
</Heading>

Alignment

Control the text alignment of headings using the align prop.

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>

Wrapping

Control how text wraps with the wrap prop. By default, the wrap prop is set to balance.

Wrapping

This text uses balance wrapping for optimal readability

This text uses normal wrapping behavior

<Heading>
  This text uses balance wrapping for optimal readability
</Heading>
<Heading wrap="normal">
  This text uses normal wrapping behavior
</Heading>

Spacing

Headings support various spacing props for margin and padding.

Spacing

With left margin

With padding

With top and bottom margin

<Heading marginLeft="40">
  With left margin
</Heading>
<Heading padding="8">
  With padding
</Heading>
<Heading marginTop="16" marginBottom="16">
  With top and bottom margin
</Heading>

Semantic HTML

Use the as prop to control the underlying HTML element while maintaining consistent styling.

Semantic HTML

This is an h1 element

This is an h2 element

This is an h3 element

This is an h4 element

This is an h5 element

<Heading as="h1">
  This is an h1 element
</Heading>
<Heading as="h2">
  This is an h2 element
</Heading>
<Heading as="h3">
  This is an h3 element
</Heading>
<Heading as="h4">
  This is an h4 element
</Heading>
<Heading as="h5">
  This is an h5 element
</Heading>

API reference

Prop	Type	Default
wrap How lines break. "balance" evens them out, which is what a headline wants.	CSSProperties["textWrap"]	balance
…and every FlexProps prop	inherited	—
…and every TextProps prop	inherited	—
as	h1h2h3h4h5h6	h1
variant	TextVariant	—
size	xssmlxl	m
weight	defaultstrong	strong
family	displayheadingbodylabelcode	—
onBackground	`${ColorScheme}-${ColorWeight}`	—
onSolid	`${ColorScheme}-${ColorWeight}`	—
opacity	Opacity	100
align	leftcenterrightjustify	—
truncate	boolean	—
padding	SpacingTokennumber	—
paddingX	SpacingTokennumber	—
paddingY	SpacingTokennumber	—
paddingLeft	SpacingTokennumber	—
paddingRight	SpacingTokennumber	—
paddingTop	SpacingTokennumber	—
paddingBottom	SpacingTokennumber	—
margin	SpacingTokennumber	—
marginX	SpacingTokennumber	—
marginY	SpacingTokennumber	—
marginLeft	SpacingTokennumber	—
marginRight	SpacingTokennumber	—
marginTop	SpacingTokennumber	—
marginBottom	SpacingTokennumber	—
children	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every React.HTMLAttributes prop	inherited	—