Heading

Semantic heading h1-h6 + display. Visual scale decoupled dari semantic tag via prop 'as'.

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

Examples

Levels

Display

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<Heading level="display">Display</Heading>
<Heading level="1">Heading 1</Heading>
<Heading level="2">Heading 2</Heading>
...
<Heading level="6">Heading 6</Heading>

Decouple visual from semantic

Visual level='2' tapi semantic tag h1 untuk SEO.

Halaman utama (h1 tag, h2 visual)

<Heading level="2" as="h1">
  Halaman utama (h1 tag, h2 visual)
</Heading>

Tone

Default tone

Muted tone

Primary tone

<Heading tone="muted">...</Heading>
<Heading tone="primary">...</Heading>

Align

Left (default)

Center

Right

<Heading align="center">...</Heading>

Props

Prop	Type	Default	Description
level	`"display" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6"`	`"1"`	Visual scale. Display = hero marketing.
as	`ElementType`	—	Override semantic tag (default: h1-h6 sesuai level).
tone	`"primary" \| "muted"`	—	Color tone.
align	`"left" \| "center" \| "right"`	—	Text align.

Best Practice

SEO & A11y: Gunakan semantic hierarchy (h1 → h2 → h3) untuk screen reader + search engine. Jika visual perlu berbeda, pakai prop as.

Display level: Hanya untuk hero marketing / splash. Jangan pakai di dalam artikel/docs.