Hierarchy

The basic hierarchy of text sizes available. If no size is provided, it defaults to "m".

Editable example
<Text size="xl">Text XL</Text>
<Text size="l">Text L</Text>
<Text size="m">Text M</Text>
<Text size="s">Text S</Text>
<Text size="xs">Text XS</Text>
<Text size="xl">Text XL</Text>
<Text size="l">Text L</Text>
<Text size="m">Text M</Text>
<Text size="s">Text S</Text>
<Text size="xs">Text XS</Text>

Best practices

1. Avoid manually applying a className to override the color, text-align, font-weight, or font-size. All of these parameters are handled by the component's props.
2. Text components do not contain any inherent spacing. It's recommended to use the layout to determine spacing. Rather than applying a className and applying a margin or padding to the text, use the containing element with display: flex; or display: grid; and gap to determine spacing.

Element

Determines the underlying HTML element rendered by the component. By default it's a <span>, but can be changed to any other element such as a <p> for paragraph text.

Editable example
<Text element="p">This is some longer form paragraph text. Makes more sense for this to be display block and render in a p tag rather than the default inline span that you get out of the box.</Text>
<Text element="p">This is some longer form paragraph text. Makes more sense for this to be display block and render in a p tag rather than the default inline span that you get out of the box.</Text>

Secondary

Secondary text should be used to reduce emphasis on text with a fainter text color.

Editable example
<Text secondary>Some secondary de-emphasized text</Text>
<Text secondary>Some secondary de-emphasized text</Text>

Strong

Use the strong prop to make text appear bolder for emphasis. Note that this does not change the rendered HTML element to a <strong> tag. If the text is not just cosmetically bolder but should be read by a screen reader with more emphasis, you can also set it to render a <strong> tag with element="strong".

Editable example
<Text strong>Bolder text for more emphasis</Text>
<Text strong>Bolder text for more emphasis</Text>

Alignment

Alignment can be set using the align prop. Defaults to left aligned.

Editable example
<Text align="center">Center aligned text</Text>
<Text align="center">Center aligned text</Text>

Theme

Change the theme for text to match its context.

Editable example
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    <Text theme="dark" element="p">Dark themed text</Text>
    <Text secondary theme="dark" element="p">Dark themed secondary text</Text>
  </div>
</Card>
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    <Text theme="dark" element="p">Dark themed text</Text>
    <Text secondary theme="dark" element="p">Dark themed secondary text</Text>
  </div>
</Card>

Accessibility

Avoid manually overriding the text color and instead use the secondary prop to dim less important text and the theme prop to use appropriate colors for a light or dark theme. The default colors assigned for each of these props have been chosen to meet the WCAG AA minimum contrast ratio.

Figma text styles

There's an explicit mapping of text styles to React components for the standard and strong variants. Figma doesn't store text color or alignment in text styles though, so those variants need to be inferred. Rule of thumb is if the text color is Slate-80 in Figma, it should be the secondary variant.