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

import React from 'react';
import Text from './components/Text';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Text {...props}>
        {props.children || 'Example text content'}
      </Text>
    </div>
  );
}

Anatomy

Understanding the structure of the Text component helps ensure proper implementation and customization.

Property Description Type
rootSlot rendered into [data-slot="text"].Root
headlineHeadline region of the component.Part
titletitle prop for Text.string | undefined
bodyBody region of the component.Part
captionCaption region of the component.Part
overlineOverline region of the component.Part
codeCode region of the component.Part
weight-lightWeight light region of the component.Part
weight-normalWeight normal region of the component.Part
weight-mediumWeight medium region of the component.Part
weight-semiboldWeight semibold region of the component.Part
weight-boldWeight bold region of the component.Part
align-leftAlign left region of the component.Part
align-centerAlign center region of the component.Part
align-rightAlign right region of the component.Part
align-justifyAlign justify region of the component.Part
color-defaultColor default region of the component.Part
color-mutedColor muted region of the component.Part
color-subtleColor subtle region of the component.Part
color-accentColor accent region of the component.Part
color-successColor success region of the component.Part
color-warningColor warning region of the component.Part
color-errorColor error region of the component.Part
transform-uppercaseTransform uppercase region of the component.Part

Variants & States

import React from 'react';
import Text from './components/Text';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Text {...props}>
        {props.children || 'Example text content'}
      </Text>
    </div>
  );
}

API Reference

Props

NameTypeRequiredDefaultDescription
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'
truncatebooleanNofalse
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

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Text from './components/Text';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Text {...props}>
        {props.children || 'Example text content'}
      </Text>
    </div>
  );
}

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Text - Advanced Patterns</h3>
      <p>Advanced usage patterns for Text include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}

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?

Related Components