Heading

Status: stableAccessibility reviewedtenet-ui@0.4.0

import { Heading } from 'tenet-ui';

Also accepts every prop of HTMLAttributes<HTMLHeadingElement>.

Source: src/components/Heading/Heading.tsx

Usage guidelines

When to use: every page, section, card and dialog title. Heading is the only way to put the display (serif) type scale on screen — reach for it instead of a raw <h1 className="page-title"> with custom CSS. For body copy, captions and labels use Text.

Rules

level (1–4) picks the size from the type scale (36 / 28 / 20 / 16) and the default element (h1…h4). Never set fontSize or fontFamily inline — the scale is the token.
as picks the element when semantics and size must differ. Keep the document outline honest: one h1 per page, then h2, h3… in order without skipping ranks. If a section title should look big but sit under the page h1, write <Heading level={1} as="h2">; if a card title is visually small but is the card’s own h2, write <Heading level={4} as="h2">.
Use as="p" / "div" / "span" for display-styled text that is not a heading (a hero stat, a decorative quote) so screen readers don’t announce a false section.
truncate clips to one line with an ellipsis — use it in constrained rows (table titles, cards in a grid); make sure the full text is reachable elsewhere (a tooltip, the detail page).
Color is always fgColor-default; a muted or accent title is a Text with weight="semibold", not a recolored heading.

Do / Don’t

✅ <Heading level={1}>Newsroom</Heading> — the page title.
✅ <Heading level={3} as="h2">Recent stories</Heading> — a section h2 at the level-3 size.
✅ <Heading level={4} truncate>{story.title}</Heading> — a card title that must fit one line.
❌ <h1 style={{ fontSize: 36, fontFamily: 'Georgia' }}> — off-scale, off-token.
❌ <Heading level={4} as="h1">Settings</Heading> next to <Heading level={1} as="h5"> — the outline no longer matches what people see; keep ranks in reading order.

See also: Text for everything that is not a section title; system guidelines typography (the scale, one level={1} per page, as for honest ranks) and content (sentence case).

Examples

7 stories for Heading — open in Storybook

Level 1 components-heading--level-1
Level 2 components-heading--level-2
Level 3 components-heading--level-3
Level 4 components-heading--level-4
Semantics Vs Size components-heading--semantics-vs-size
Truncate components-heading--truncate
Type Scale components-heading--type-scale

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4` HeadingLevel	`2`	Visual size on the type scale: 1 → `fontSize-5` (36), 2 → `fontSize-4` (28), 3 → `fontSize-3` (20), 4 → `fontSize-2` (16). Also picks the default element (`h1`…`h4`).
`as`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'div' \| 'span'` HeadingElement	`h${level}`	Element to render, so document semantics and visual size can differ (e.g. a level-1 look on an `h2` in a page that already has an `h1`).
`truncate`	`boolean`	`false`	Clip overflowing text to a single line with an ellipsis.
`children`	`ReactNode`	—	Heading text.