Heading
Semantic headings with an independent display scale.
Add it to your project
Eject the complete heading group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject headingbash
npx toucan eject headingapp.tsx
import { Heading } from '@/components/toucan/heading';Use when
Content introduces a section in the document hierarchy.
Avoid when
Text only needs larger styling without heading semantics; use Text.
Example
Display Large
Heading 2
Heading 3
Heading 4
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Heading
Heading
Props type: HeadingProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined | No | The HTML element rendered by the component. |
display | boolean | "xxs" | "xs" | "sm" | "md" | "lg" | undefined | No | Visual display size. `true` maps to `"md"`. Purely visual — `level` still controls the HTML tag. |
level | 1 | 2 | 3 | 4 | 5 | 6 | — | Required | Semantic heading level rendered in the document outline. |
Also accepts the native heading attributes that are not replaced by a Toucan prop.
Type exports
DisplaySize, HeadingProps
ts
export type DisplaySize = "xxs" | "xs" | "sm" | "md" | "lg";Accessibility
- Choose level from document structure, then choose display for appearance.
Token families
headingdisplay