Text
Styled body copy.
Also known as:
- Specialized text
Overview
Purpose
The Text component styled body copy.within our design system. It follows our primitive layer principles, ensuring consistency and reusability across applications.
When to Use
- Use when you need component functionality
- Appropriate for textual contexts
- Follows primitive component patterns
When Not to Use
- Avoid when simpler alternatives exist
- Don't use for inappropriate contexts
- Consider alternatives for edge cases
Live Example
Anatomy
Understanding the structure of the Text component helps ensure proper implementation and customization.
| Property | Description | Type |
|---|---|---|
| root | Slot rendered into [data-slot="text"]. | Root |
| headline | Headline region of the component. | Part |
| title | title prop for Text. | string | undefined |
| body | Body region of the component. | Part |
| caption | Caption region of the component. | Part |
| overline | Overline region of the component. | Part |
| code | Code region of the component. | Part |
| weight-light | Weight light region of the component. | Part |
| weight-normal | Weight normal region of the component. | Part |
| weight-medium | Weight medium region of the component. | Part |
| weight-semibold | Weight semibold region of the component. | Part |
| weight-bold | Weight bold region of the component. | Part |
| align-left | Align left region of the component. | Part |
| align-center | Align center region of the component. | Part |
| align-right | Align right region of the component. | Part |
| align-justify | Align justify region of the component. | Part |
| color-default | Color default region of the component. | Part |
| color-muted | Color muted region of the component. | Part |
| color-subtle | Color subtle region of the component. | Part |
| color-accent | Color accent region of the component. | Part |
| color-success | Color success region of the component. | Part |
| color-warning | Color warning region of the component. | Part |
| color-error | Color error region of the component. | Part |
| transform-uppercase | Transform uppercase region of the component. | Part |
Variants & States
API Reference
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
as | 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | No | — | — |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | No | 'md' | — |
weight | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | No | 'normal' | — |
align | 'left' | 'center' | 'right' | 'justify' | No | 'left' | — |
truncate | boolean | No | false | — |
transform | 'none' | 'uppercase' | 'lowercase' | 'capitalize' | No | 'none' | — |
Accessibility
Standards Compliance
This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.
Common Pitfalls
- Hardcoded typography
- no semantic mapping.
Accessibility Checklist
- ○ Keyboard navigation support
- ○ Screen reader compatibility
- ○ Color contrast compliance
- ○ Focus management
- ○ ARIA attributes
- ○ Reduced motion support
Usage Guidelines
✓ Do
- Use consistent spacing and sizing
- Follow established patterns
- Provide clear labels and descriptions
- Test with assistive technologies
✗ Don't
- Override core functionality
- Use without proper context
- Ignore accessibility requirements
- Modify without design system approval
Examples
Advanced Usage
Complex patterns including composition, state management, and real-world scenarios.
Development Tools
Use these tools to analyze the component's performance, design tokens, and accessibility during development.
Contribute
Help us improve the Text component documentation. Found an issue or have suggestions?