Text
Polymorphic typography component for rendering text with consistent styling across the design system.
Overview
The Text component provides consistent typography across the application. It's a polymorphic component that can render as any HTML element while applying design system typography styles.
Display Text
Title Text
Body text for paragraphs and general content.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Text content to render |
as | ElementType | 'p' | HTML element to render as |
variant | 'display' | 'title' | 'body' | 'body' | Typography variant |
size | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Text size |
weight | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'regular' | Font weight |
color | 'base' | 'muted' | 'subtle' | 'primary' | 'primary-alt' |
'success' | 'warning' | 'danger' | 'inherit' | 'base' | Text color |
align | 'left' | 'center' | 'right' | 'left' | Text alignment |
truncate | boolean | false | Truncate text with ellipsis |
Variants
Typography Variants
Three semantic variants for different content types.
Display Variant
For hero headlines and large promotional text
Title Variant
For section headings and emphasis
Body Variant
For paragraphs and general content
Sizes
Seven size options from 2xs to 2xl.
2xs - Extra Extra Small
xs - Extra Small
sm - Small
md - Medium (default)
lg - Large
xl - Extra Large
2xl - Extra Extra Large
Weights
Five weight options for emphasis control.
Light weight (300)
Regular weight (400)
Medium weight (500)
Semibold weight (600)
Bold weight (700)
Colors
Semantic color options for different contexts.
Base - Default text color
Muted - Secondary text
Subtle - Tertiary text
Primary - Brand color
Primary Alt - Alternative brand
Success - Positive states
Warning - Caution states
Danger - Error states
Examples
Polymorphic Rendering
Render as any HTML element while keeping consistent styles.
Heading 1
Heading 2
Inline span<Text as="h1" variant="display" size="2xl">Heading 1</Text>
<Text as="h2" variant="title" size="xl">Heading 2</Text>
<Text as="span" variant="body" weight="medium">Inline span</Text>
<Text as="label" size="sm" weight="medium">Form label</Text>Truncation
Truncate long text with ellipsis.
This is a very long text that will be truncated when it exceeds the container width
<Text truncate>Long text content...</Text>Text Alignment
Control text alignment within containers.
Left aligned text (default)
Center aligned text
Right aligned text
Accessibility
- Semantic HTML: Use the 'as' prop to render appropriate heading levels.
- Contrast: All color variants meet WCAG AA contrast requirements.
- Responsive: Text scales appropriately across viewport sizes.
Best Practices
- Use semantic heading hierarchy (h1, h2, h3, etc.)
- Don't skip heading levels for styling purposes
- Use 'muted' and 'subtle' for less important information
- Ensure sufficient contrast for all text colors