Text size large regular
Text size large medium
Text size large strong
Text size standard regular
Text size standard medium
Text size standard strong
Text size small regular
Text size small medium
Text size small strong
Text size xsmall regular
Text size xsmall medium
Text size xsmall strong
  • Heading For titles.
  • Strong For emphasising a piece of text.
  • Secondary For de-emphasising a piece of text.
  • Notice For tone-specific messaging.
Text can be aligned via the align prop. If you need alignment to differ across various screen sizes, you can provide an array of values describing the alignment of each breakpoint.
Left
Center
Right
Center on mobile
If you’re displaying user-generated content that may not fit within your layout, you can truncate text with the truncate prop.
Really long text that won’t fit in the layout
The foreground colour of text can be set by applying the correct tone. In addition to the foundation tones, secondary provides a way to de-emphasise text. It is not recommended to use caution on light backgrounds due to contrast issues around yellow text.
When using tones other than neutral and secondary, consider using Notice instead.
neutral
secondary
promote
info
positive
critical
Text supports some additional tones for special cases:
  • link — For navigation text.
  • formAccent — For highlight text within form components.
link
formAccent
When inside a container that specifies a tone-based background, the text tone will be matched by default.
neutral
promote
info
positive
caution
critical
The HTML tag can be customised to ensure the underlying document semantics are meaningful. For example, using a p element for marking-up a paragraph. This can be done using the component prop.

Uses a p element to provide paragraph semantics.

To ensure text has sufficient contrast, when on a dark background the foreground colour is inverted.
When using custom backgrounds or images, this behaviour can be applied using the BackgroundProvider and specifying whether the background is dark or light.
Neutral text
Secondary text