Components

Heading

A section heading with its own shareable link. It builds on Text's heading roles (h1–h4 — the right look and the right semantic element) and adds the deep link every long page deserves: hover a heading and a chain-link icon appears in the left gutter, pointing straight at that heading's anchor.

Live demo

Hover a heading to reveal its permalink in the gutter. Each level renders the matching Text variant and semantic element.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

How it works

composition: No new type styling — the heading renders through Text's h1–h4 roles, so it inherits the official type system (friendly slab-serif display, flat solid color; engraving belongs to the proposed system) and the canonical semantic element. Heading just adds the gutter anchor.
permalink: Set an id and a Lucide chain-link icon waits in the left gutter at opacity 0, fading in on hover or keyboard focus, styled like any other link. Skip the id and you simply get a Text heading.
slug ownership: The id (slug) is the caller’s to supply — it owns slug generation so the same slugs feed a table of contents with no drift. Heading never guesses.

Props

level?: 1 | 2 | 3 | 4: Heading level → Text’s h1–h4 variant and the matching semantic element. Defaults to 2.
id?: string: Anchor id (slug). When set, the permalink appears and the heading carries the id.
anchorLabel?: string: Accessible name for the permalink link (e.g. “Link to Overview”). Pass a translated string.
className?: string: Forwarded to the heading element — e.g. document-flow spacing.

Usage

Pass the level and an id; supply the slug yourself so it matches your ToC.

tsx

import { Heading } from '@halo-compliance/ui'

<Heading level={2} id="overview" anchorLabel="Link to Overview">
  Overview
</Heading>