Text
Text
Text
is a component that makes it easy to use our typography styles throughout a product or application, ensuring consistency and a unified look and feel. It includes attributes such as font size, weight, letter spacing, line height and decoration.
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.