Text

The <Text /> component gives us a set of styling options for text based off the design system tokens.

Show codeCopy code

We provide 4 font sizes that are suitable for body and component text. standard is the default font size when using the text component, and should always be your first weapon of choice.

Show codeCopy code

Use the larger text sizes for short text elements that need to stand out.

Show codeCopy code

For example, you could reach for larger font sizes when you need to create "dashboard stat cards" and you want the numerical values to be prominent:

Show codeCopy code

Headings have their own set of sizes, tied to their hierarchical levels. Go to Heading to read more.

Show codeCopy code

We use a “system” font stack system for all components, which means that the font family will default to the font of the consumer’s operating system. For example, on MacOS it will default to SF Pro, and on Windows it will be Segoe UI.

This helps boost performance, as the client (the browser) doesn’t have to download any font files, but will use one it already has.

It also provides a comfortable look for the user, seeing they are already familiar with their OS.

For body and component text, we use a sans (sans-serif) system font stack as default, and for code examples, we use a mono (monospaced) system font stack.

Show codeCopy code

• tight
• loose
• nospace

Show codeCopy code

Use bold text colours for elements that need more prominence, and subtle text colours for elements that need less prominence.

Show codeCopy code

When an <Text /> component is rendered without children or undefined as children. A dash - is rendered to represent a lack of text.

This is often using when the text inside the Text component is conditional or is from a database where it might only optionally exist.

Show codeCopy code

By default, it renders a <span>. You can render it with a different HTML element tag by using the as prop:

Show codeCopy code