The Text component should be used for all text on the page.

Props

Component props
Name
Type
Default
"start" | "end" | "center" | "justify" | "forceLeft" | "forceRight"
"start"

"start" and "end" should be used for regular alignment since they flip with locale direction. "forceLeft" and "forceRight" should only be used in special cases where locale direction should be ignored, such as tabular or numeric text.

children
React.Node
-
"blue" | "darkGray" | "eggplant" | "gray" | "green" | "lightGray" | "maroon" | "midnight" | "navy" | "olive" | "orange" | "orchid" | "pine" | "purple" | "red" | "watermelon" | "white" | "default" | "subtle" | "success" | "error" | "warning" | "shopping" | "inverse" | "light" | "dark"
"darkGray"
boolean
false
boolean
false
number
-

Visually truncate the text to the specified number of lines. This also adds the title attribute if children is a string, which displays the full text on hover in most browsers.

"normal" | "breakWord" | "noWrap"
"breakWord"
"100" | "200" | "300" | "400" | "500" | "600" | "sm" | "md" | "lg"
300

The sizes are based on our font-size design tokens. The "sm", "md", and "lg" values will soon be deprecated.

title
string
-

This populates the title attribute of the element, which is visible on hover in most browsers. This is useful when truncating the text with lineClamp when children is a React.Node. See the Title variant for more details.

boolean
false
"bold" | "normal"
"normal"

Variants

Alignment

Use this to adjust the positioning of text within wrapper elements.

Start (default)
End
Center
Justify
Force left
Force right

Block vs. inline

The Text component allows you to specify whether you want block or inline text.

Some content in a default block element. (default)
Inline text with the inline prop. More inline text.

Colors

You can specify which color you want for your text. Most colors change in dark mode, but light and dark are available when no switch is desired.

⚠️ Note that the previous options ('red', 'white', 'lightGray', 'gray', 'darkGray', 'green', 'pine', 'olive', 'blue', 'navy', 'midnight', 'purple', 'orchid', 'eggplant', 'maroon', 'watermelon', 'orange') are still valid but will be deprecated soon.

Inverse
Subtle
Default
Success
Warning
Error
Shopping
Light
Dark

Overflow

Gestalt provides utility options to deal with text overflow.

breakWord (default):
This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
normal:
This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
noWrap:
This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
lineClamp:
This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

Sizes

You can apply size options to define the size of the text. These font sizes follow those available through our Design Tokens. If your text needs to be a semantic heading (H1-H6), use Heading instead.

Size 100
こんにちは
Size 200
こんにちは
Size 300 (default size)
こんにちは
Size 400
こんにちは
Size 500
こんにちは
Size 600
こんにちは

Styles

There are multiple styles, such as bold and italic, that we can attach to the Text component.

Bold
Italic
Underline

Title

The 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.
If children is a React.Node (e.g. when using Link), use the title prop to manually set the title attribute.

Hover over the examples below for a few seconds to see the title text:
This title attribute is automatically added because lineClamp is used and children is a string.
This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉