Basic Usage

The Text component provides a flexible way to render text with consistent typography styles from the Volt Design System.

Title 3 - Large heading textTitle 2 - Medium heading textTitle 1 - Small heading textHeading 3 - Large subheadingHeading 2 - Medium subheadingHeading 1 - Small subheadingBody 2 - Default body textBody 1 - Small body textHelper 2 - Small helper textHelper 1 - Small helper text

import { Text } from "@epilot/volt-ui"

<Text variant="title3">Title 3</Text>
<Text variant="body2">Body text</Text>
<Text variant="body1">Small emphasized text</Text>

Usage with asChild

Use the asChild prop with Radix UI's Slot component to merge props with a child element:

Title 1

Heading 1

import { Text } from "@epilot/volt-ui"

<Text asChild variant="title1"><h1>Title 1</h1></Text>
<Text asChild variant="heading1"><h2>Heading 1</h2></Text>

API Reference

Prop	Type	Default	Description
`variant`	See variants below	`"body2"`	The typography variant from the design system.
`asChild`	boolean	`false`	When `true`, merges props onto the child element instead of rendering a `<span>`. Useful for applying Text styles to semantic HTML elements.
`className`	string	-	Additional Tailwind classes merged with the defaults.

Typography Variants

Title variants: title3 (28px), title2 (24px), title1 (20px)

Heading variants: heading3 (18px), heading2 (16px), heading1 (14px)

Body variants: body2 (14px), body1 (12px)

Helper variants: helper2 (14px), helper1 (12px)

Styling with className

For custom colors, alignment, or any other styling, use the className prop:

<Text className="volt-text-accent-default volt-text-center">
  Centered accent text
</Text>
<Text variant="heading2" className="volt-text-error-default">
  Error message heading
</Text>

Accessibility

Use semantic HTML elements via the asChild prop (e.g., <h1>, <h2>, <p>) for proper document structure
Ensure sufficient color contrast when applying custom colors
Use appropriate heading hierarchy with title and heading variants (title3 → title2 → title1 → heading3, etc.)
Keep text content clear and descriptive

Text