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 responsive values describing the alignment of each breakpoint, e.g. align={{ mobile: 'center', tablet: 'left' }}
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.
Text supports some additional tones for special cases:
  • link — For navigation text.
  • formAccent — For highlight text within form components.
When inside a container that specifies a tone-based background, the text tone will be matched by default.
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 either inverts or lightens.
When using custom backgrounds or images on a Box component, this behaviour can be applied by setting the background to either customLight or customDark.
Neutral text
Secondary text
Critical text
Caution text
Positive text
Info text
Promote text
FormAccent text
BrandAccent text