Components

Text

Design
Code

Display user content or microcopy at common sizes.

Text is the most common typographical element within our interfaces. Think of it as the body copy.

Web
React Native
Android
Apple
Other

If sending a check, please include the invoice number in the memo.

<Text>
  If sending a check, please include the invoice number in the memo.
</Text>

Props

level

oneOf
string

The level (size) of the text.

  • default (default)
  • small
  • micro
  • large
  • additional (deprecated - use color="nonessential" instead)

isTight

bool

Determines whether to show the text with tighter line-height.

color

oneOf
string

Determines the color of the text.

  • contrast
  • default (default)
  • subtle
  • nonessential

hideOverflow

bool

Determines whether to truncate the text with an ellipsis.

qaId

string

A unique string to control this text in automated tests.

className

string