Layout

Typography

Semantic text components for headings, body text, paragraphs and links with rich formatting options.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

DefaultSecondarySuccessWarningDanger

ItalicUnderlineStrikethroughinline codeClick to copy

Body text with a typography link styled with the primary color.

Installation

npx benflux-ui add typography

Usage

import { Heading, Text, Paragraph, TypographyLink } from "@benflux-ui/react"

<Heading level={1}>Page Title</Heading>
<Heading level={2} as="h3">Semantic override</Heading>

<Text variant="secondary" size="sm" weight="medium">Label text</Text>
<Text italic underline>Styled text</Text>
<Text code>const x = 1</Text>
<Text copyable>Copy me</Text>

<Paragraph size="lg">
  Body paragraph with a <TypographyLink href="/docs">link</TypographyLink>.
</Paragraph>

Props — Heading

Prop	Type	Default	Description
level	1 \| 2 \| 3 \| 4 \| 5 \| 6	1	Semantic heading level (h1–h6)
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	—	Override the rendered HTML element

Props — Text

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "success" \| "warning" \| "danger"	"default"	Color variant
size	"xs" \| "sm" \| "base" \| "lg" \| "xl"	"base"	Font size
weight	"normal" \| "medium" \| "semibold" \| "bold"	"normal"	Font weight
italic	boolean	false	Italic style
underline	boolean	false	Underline decoration
strikethrough	boolean	false	Strikethrough decoration
code	boolean	false	Inline code style with monospace font
copyable	boolean	false	Shows a copy icon on hover