Skip to main content

Text

Text is a typography component for headings, body copy, and display text.

Examples​

Headings​

Open in: Storybook | Figma

Body​

Open in: Storybook | Figma

Display​

Open in: Storybook | Figma

Usage​

When to use Text​

  • To add content to a screen.

When to consider something else​

  • For bulleted or numbered lists, use the Text list component (coming soon).
  • For smaller Navigation copy (such as the bottom tab bar), apply the Navigation text style directly to a text box.

How this component works​

  • This component is built using the composite typography tokens.
  • Paragraph spacing is set to the minimum recommended values to align with accessibility guidelines (WCAG SC 1.4.12). While you can increase the amount of paragraph spacing, you should not decrease without consulting an accessibility specialist.

Choosing between variations​

There are 9 variations of the Text component.

  • Use a Heading variation (large, medium, small, x-small) for headings.
  • Use a Body variation (large, medium, small, x-small) for body copy.
  • Use the Display variation for larger display text.

Code usage​

Open Storybook

  • Text list (coming soon)