Heading

A real heading. Its level sets the page outline, and its size follows.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Heading, Stack } from '@weft-js/warp'export function Levels() {  return (    <Stack gap="related">      <Heading level={1}>Project settings</Heading>      <Heading level={2}>Project settings</Heading>      <Heading level={3}>Project settings</Heading>      <Heading level={4}>Project settings</Heading>    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { Heading } from '@weft-js/warp'<Heading>Project settings</Heading>

Roles

role changes the look and leaves the outline alone.

tsx

import { Heading, Stack } from '@weft-js/warp'export function Roles() {  return (    <Stack gap="related">      <Heading level={2} role="display">Ship it</Heading>      <Heading level={2} role="title">Ship it</Heading>      <Heading level={2} role="heading">Ship it</Heading>      <Heading level={2} role="label">Ship it</Heading>    </Stack>  )}

A page's outline

Use level for the outline, with a single 1 at the top and 2 for each section under it.

tsx

import { Heading, Stack, Text } from '@weft-js/warp'export function PageTop() {  return (    <Stack gap="section">      <Stack gap="tight">        <Heading level={1}>Deploys</Heading>        <Text subtle>Everything shipped to storefront this month.</Text>      </Stack>      <Stack gap="tight">        <Heading level={2}>Failed</Heading>        <Text subtle>Retry timed out upstream calls, by Sam Okafor.</Text>      </Stack>      <Stack gap="tight">        <Heading level={2}>Live</Heading>        <Text subtle>Cache product images at the edge, by Priya Raman.</Text>      </Stack>    </Stack>  )}

When to use

Use it for

Titling a page or a section

Reach for something else

Text, when it looks like a heading but isn't one in the outline

Accessibility

Don't skip levels: screen reader users move through a page by its headings.

API Reference

Prop	Type	Default	Description
`children`	`unknown`	—	What it contains.
`level`	`2 \| 3 \| 4 \| 6 \| 1 \| 5`	`2`	The place in the outline, from 1 to 6.
`role`	`HeadingRole`	—	The look: `display`, `title`, `heading` or `label`.

RelatedText Link