BRAID
Braid Logo
 

Text

Text size large regularText size large mediumText size large strong
Text size standard regularText size standard mediumText size standard strong
Text size small regularText size small mediumText size small strong
Text size xsmall regularText size xsmall mediumText 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' }}
LeftCenterRightCenter 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 layoutAnother 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.
neutralsecondarypromoteinfopositivecritical
Open in Playroom

Additional tones

Text supports some additional tones for special cases:
  • link — For navigation text.
  • formAccent — For highlight text within form components.
linkformAccent
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 textSecondary textCritical textCaution textPositive textInfo textPromote textFormAccent textBrandAccent text
Open in Playroom