Typography

Installation

Usage

import {
  Heading,
  Text,
  Blockquote,
  List,
  ListItem,
  InlineCode,
  Link,
} from "@/components/redpanda-ui/typography"

// Headings
<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading as="h2" align="center">Centered Heading</Heading>

// Text variants
<Text variant="titleLarge">Title Large</Text>
<Text variant="bodyLarge">Body text</Text>
<Text variant="labelMedium" as="label">Form Label</Text>
<Text variant="numberMedium">1,234.56</Text>
<Text variant="captionMedium">Caption text</Text>

// Other elements
<Blockquote>Blockquote text</Blockquote>
<InlineCode>code</InlineCode>
<Link href="#">Link text</Link>

Typography Scale

The typography system is organized into categories based on usage:

Headings

Display-style headings for page and section titles.

Titles

Medium-weight display text for subsection headings and card titles.

Body Text

Standard paragraph and content text with comfortable line heights.

Body Strong

Emphasized body text with medium font weight.

Labels

Text optimized for form labels and UI elements.

Label Strong

Bold labels for emphasized form fields and UI text.

Button Text

Semibold text with tight line height optimized for buttons.

Numbers

Tabular numbers with optimized spacing for data display.

Number Strong

Emphasized tabular numbers with medium font weight.

Captions

Small text for image captions, annotations, and metadata.

Legacy Variants

These variants are maintained for backward compatibility:

Other Elements

When to Use

Typography components provide consistent text styling across your application:

• Headings (h1-h4): Use for page and section titles with semantic HTML
• Titles: Display text for subsection headings without strict semantic meaning
• Body: Standard paragraph and content text
• Labels: Form labels, navigation items, and UI text
• Button: Text within button components
• Numbers: Tabular data, metrics, and statistics
• Captions: Supplementary information and metadata

Choosing the Right Variant

1. Semantic structure needed? → Use Heading components
2. Display heading without semantics? → Use Text with title variants
3. Body content? → Use Text with body variants
4. Form labels? → Use Text with label variants
5. Numerical data? → Use Text with number variants
6. Small annotations? → Use Text with caption variants