ABBA UIv0.1.0
Typography

Heading

Section headings with rank separate from size.

Server-renderable1 export

`level` sets the heading rank and therefore the document outline; `size` sets the visual weight. Keeping them independent means you never have to pick the wrong rank to get the right size.

Import

import { Heading } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/heading.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Rank and size are independent

This h3 is styled at display size without disturbing the outline.

Page title

Section

Visually large, still an h3

<Stack gap={3}>
  <Heading level={1}>Page title</Heading>
  <Heading level={2}>Section</Heading>
  <Heading level={3} size="display">Visually large, still an h3</Heading>
</Stack>

Props

Heading props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
level1 | 2 | 3 | 4 | 5 | 62Heading rank, rendered as the matching h1–h6 element.
size"sm" | "md" | "lg" | "xl" | "display"Visual size. Defaults to a sensible size for the level.
tone"default" | "muted" | "primary""default"Semantic colour role.

Accessibility

  • Pick `level` for the document structure, never for the font size.
  • Do not skip ranks — an h2 followed by an h4 breaks heading navigation.