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

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"
"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"
"sm" | "md" | "lg"
"lg"

sm: 12px, md: 14px, lg: 16px

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

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.

White
Gray
Dark Gray (default)
Blue
Red

Overflow

Gestalt provides utility options to deal with text overflow.

breakWord (default):
This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 wwwwwwwwwwwwwwwwwwwwwwwwww'
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.

Small
こんにちは
Medium
こんにちは
Large (default size)
こんにちは

Styles

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

Bold
Italic
Underline