Heading

Alpha

A semantic heading component that renders <h1>–<h6> elements with consistent typography and an optional visual size override.

Import

import { Heading } from "@compa11y/react";

Usage

Example.tsx

import { Heading } from "@compa11y/react";

function Example() {
  return (
    <>
      <Heading level={1}>Page Title</Heading>
      <Heading level={2} size="lg">Visually smaller h2</Heading>
      <Heading level={3} color="muted">Muted heading</Heading>
    </>
  );
}

Features

Renders actual <h1>–<h6> based on level prop (default: 2)
Optional size prop to visually adjust without changing semantic level
Color, weight, and alignment props
Truncation with ellipsis overflow
unstyled prop for full customization

Props

Heading component props
Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level (h1–h6)
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	-	Visual size override independent of semantic level
`color`	`'default' \| 'muted' \| 'accent' \| 'error' \| 'success' \| 'warning'`	-	Text color variant
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'`	-	Font weight
`align`	`'left' \| 'center' \| 'right'`	-	Text alignment
`truncate`	`boolean`	`false`	Adds ellipsis overflow
`unstyled`	`boolean`	`false`	Removes all default styles
`children`*	`ReactNode`	-	Heading content

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Heading
Key	Action