A minimum text size of 16 px (12pt) is recommended for readability. Some short text labels, or secondary text can go lower than that, but smaller sizes should be kept to a minimum. Making text brief will also help with readability.
Keep text simple and short to avoid truncation or line wrapping in UI controls like buttons when translating languages that require more characters. Avoid overriding our line-height settings, as this can result in text clipping for scripts, like Hindi, that have taller ascenders and descenders.
Text-wrapping and hyphenation
Hyphenation on iOS is turned off by default to avoid incorrect word breaks when strings of text wrap to the next line. This is especially helpful for international languages where an incorrect word break can greatly change the meaning of a word or sentence.
align to adjust the positioning of text within wrapper elements.
Block vs. inline
The Text component allows you to specify whether you want
You can specify which color you want for your text. Most colors change in dark mode, but
dark are available when no switch is desired.
Overflow & truncation
Gestalt provides utility options to deal with text overflow.
There are multiple styles, such as bold and italic, that we can attach to the Text component.
title attribute on a
<div> can be used to show the full text of a truncated string on hover. That attribute is populated automatically when the text is truncated using
lineClamp, as long as
children is a string.
children is a
React.Node (e.g. when using Link), use the
title prop to manually set the
ref to manipulate the underlaying HTML div or span elements. Use
ref to only read HTML attributes. For example, a valid use case can be detecting truncation. The example below illustrates a case where detecting truncation allows rendering links contained within Text.
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.