IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Text

/

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
IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Text API and examples.

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

Visual


children

   REQUIRED

ReactNode

The text to display.

className

string

A class to apply to the main text element.

color

string

Determines the color of the text.

  • contrast
  • default (default)
  • subtle
  • nonessential

environment

string

Determines the environment applied.

  • light (default)
  • dark

hideOverflow

boolean

Determines whether to truncate the text with an ellipsis.

isTight

boolean

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

level

string

The level (size) of the text.

  • default (default)
  • small
  • micro
  • large

Miscallaneous


qaId

string

A unique string to target the text in automated tests.