Skip to main content

Heading

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/atomic/Heading/Heading.tsx (package @dtsl/react, exported as Heading)

Props (verbatim from source)​

export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
	className?: string
	children: React.ReactNode
	level?: 1 | 2 | 3 | 4 | 5 | 6
	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
	fontFamily?:
		| 'primary'
		| 'secondary_interactive'
		| 'secondary_regular'
		| 'secondary_bold'
	color?: string
	style?: React.CSSProperties
}

Note: level controls the rendered HTML tag (h1–h6) and defaults to 2; size controls visual size independently of level (defaults derived from level when unset).

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. Text for non-heading copy).

Decision Logic​

TODO — needs UX/product input on choosing level vs size independently.

Accessibility​

TODO — needs UX/product input. Note: level maps directly to semantic heading tags (h1-h6), which affects document outline / screen-reader navigation — a real constraint worth preserving once written.

Common Mistakes​

TODO — needs UX/product input.