Text supports these sets of styles:

• Display
• Headings
• Body
• Label
• Code

These alternative components display text in commonly used styles. Where relevant, use them instead of Text to simplify syntax:

• Display1
• Display2
• Display3
• H1
• H2
• H3
• H4
• Label
• Code
• TextNotation
• TextAction

The component wraps by default, but you can use the maxRows prop to force truncation. Truncation will occur when maxRows is greater than 0. If you don't provide a value, the text content will wrap.

Truncated text must comply with WCAG SC 1.4.4. If you use truncated text, you must ensure that a screen reader can read the full value. Read the Accessibility section for further guidance.

Although we don't encourage it, you may find it necessary to change an element’s mapped styling to another from our typography set. In this case, you'd use the styleAs prop.

Using the styleAs prop, you can maintain the correct HTML hierarchy and the appropriate visual priority. You can style headings to visually appear as different heading levels, irrespective of the underlying DOM element of a heading on the page.

Use the color prop to adjust the foreground color of any nested text. Use the primary color most of the time, the secondary color for supporting text or to create visual hierarchy, and inherit to inherit text color from the parent element.

Read our guidance on how to use text color.

Note: This prop is deprecated. Use the color prop instead.

Use the variant prop to adjust the foreground color of any nested text. Use the primary variant most often, and the secondary variant for supporting text or creating a visual hierarchy.

Read our guidance on how to use text color.