BRAID
Braid Logo
 

Text

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
Open in Playroom

Alternatives

  • Heading — For titles.
  • Strong — For emphasising a piece of text.
  • Secondary — For de-emphasising a piece of text.
  • Notice — For tone-specific messaging.

Alignment

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' }}
Left
Center
Right
Center on mobile
Open in Playroom

Limiting the number of lines

When displaying user-generated content that may not fit within your layout, you can control the number of lines to display with the maxLines prop.
Text limited to 1 line that won’t fit in the layout
Another example of really long text, but limited to 3 lines, and won’t fit in the layout.
Open in Playroom

Tones

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
Open in Playroom

Additional tones

Text supports some additional tones for special cases:
  • link — For navigation text.
  • formAccent — For highlight text within form components.
link
formAccent
Open in Playroom

Contextual tones

When inside a container that specifies a tone-based background, the text tone will be matched by default.
neutral
promote
info
positive
caution
critical
Open in Playroom

Inserting an icon

For decoration or help distinguishing between pieces of text, an icon can be provided. This will be placed to the left of the text.
In the case of wrapping text, the icon will remain on the left — with the text not wrapping beneath it. If this is not desired, place the icon inside the Text component, instead of providing it to the icon prop.
Text with an icon
Open in Playroom

Custom semantics

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.

Open in Playroom

Contrast

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
Open in Playroom