Skip to main content

Text

🌓Dark Mode Compatible

A flexible, polymorphic typography component that provides consistent text styling across the Lufa Design System.

Overview​

Use Text when you need…

  • Consistent typography using semantic type scales (h1-h6, body, caption, label)
  • Semantic text colors that adapt to light and dark themes
  • Font weight control (normal, medium, semibold, bold)
  • Text alignment (left, center, right, justify)
  • Text transformations (uppercase, lowercase, capitalize)
  • Semantic HTML elements via the polymorphic as prop
  • Token-based design values that automatically adapt to themes
Live demoInteractive

Default text

Anatomy​

The Text component is a single typography element with customizable font properties.

┌──────────────────────────────────────────┐
│  Text Component                          │
│  ┌────────────────────────────────────┐  │
│  │  variant: h1-h6, body, caption     │  │
│  │  color: primary, secondary, etc.   │  │
│  │  weight: normal, medium, bold      │  │
│  │  align: left, center, right        │  │
│  │  transform: uppercase, etc.        │  │
│  │                                    │  │
│  │  The quick brown fox jumps...      │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

Component Structure:

  • Container: Single text element (default p, customizable via as prop)
  • Variant: Typography scale from design tokens (h1-h6, body variants, caption, label)
  • Color: Semantic text color tokens
  • Weight: Font weight values (normal, medium, semibold, bold)
  • Align: Text alignment property
  • Transform: Text transformation setting

Usage​

Import the component:

import { Text } from '@grasdouble/lufa_design-system';

Basic usage​

src/App.tsx
import { Text } from '@grasdouble/lufa_design-system';

function App() {
  return (
    <>
      <Text as="h1" variant="h1" weight="bold">
        Page Title
      </Text>

      <Text variant="body" color="secondary">
        This is a paragraph of body text with secondary color.
      </Text>

      <Text as="label" variant="label" transform="uppercase" weight="semibold">
        Section Label
      </Text>

      <Text variant="caption" color="tertiary" align="center">
        Image caption text
      </Text>
    </>
  );
}

Props​

PropTypeDefaultDescription
as'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'figcaption''p'HTML element to render
variant'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-large' | 'body' | 'body-small' | 'caption' | 'label''body'Typography variant (semantic scale)
color'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'warning' | 'info' | 'inverse''primary'Text color using semantic tokens
weight'normal' | 'medium' | 'semibold' | 'bold''normal'Font weight
align'left' | 'center' | 'right' | 'justify''left'Text alignment
transform'none' | 'uppercase' | 'lowercase' | 'capitalize''none'Text transformation
classNamestringundefinedAdditional CSS classes
childrenReactNodeundefinedText content to render inside the Text

Also supports all standard HTML attributes for the underlying element (for example id, role, aria-*, data-*, style, and event handlers).

Accessibility​

Use semantic elements and matching variants for headings and labels to ensure correct screen reader output.

import { Text } from '@grasdouble/lufa_design-system';

export function HeadingBlock() {
  return (
    <>
      <Text as="h1" variant="h1">
        Main Title
      </Text>
      <Text as="h2" variant="h2">
        Section Title
      </Text>
      <Text as="h3" variant="h3">
        Subsection Title
      </Text>
    </>
  );
}
import { Text } from '@grasdouble/lufa_design-system';

export function LabeledField() {
  return (
    <>
      <Text as="label" variant="label" htmlFor="email">
        Email Address
      </Text>
      <input type="email" id="email" />
    </>
  );
}
  • Match heading variants to heading elements (as="h2" with variant="h2").
  • Associate labels with inputs using htmlFor and id.
  • Avoid making Text focusable unless it is intentionally interactive.
  • Ensure color contrast remains at WCAG AA levels.

Theming & Tokens​

Typography variants map to semantic typography tokens:

  • h1 (~40px), h2 (~32px), h3 (~28px), h4 (~24px), h5 (~20px), h6 (~18px)
  • body-large (~18px), body (~16px), body-small (~14px)
  • caption (~12px), label (~14px)

Semantic colors adapt across themes: primary, secondary, tertiary, success, error, warning, info, inverse.

import { Text } from '@grasdouble/lufa_design-system';

export function TokenColorExample() {
  return <Text color="secondary">Token-based color adapts to theme</Text>;
}

Do / Don’t​

Do
  • Use semantic HTML via the as prop for headings, labels, and captions
  • Use semantic colors for status and emphasis
  • Use weight and variant together to communicate hierarchy
  • Use transform sparingly for labels and metadata
  • Combine Text with layout components for spacing
Don't
  • Use heading variants without matching heading elements
  • Skip heading levels in a content hierarchy
  • Hard-code colors in style when tokens suffice
  • Use uppercase for long passages of text
  • Mix too many weights in tight groups
  • Box - Layout primitive for spacing and backgrounds
  • Stack - Layout primitive for stacking text elements
  • Badge - Small UI element for labels and counts
  • Button - Interactive element that includes text styling
  • Heading - Specialized component for page and section titles
  • Paragraph - Specialized component for body text blocks