Text

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

Props

Component props
Name	Type	Default
`align`	`"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`	-
`color`	`"blue" \| "darkGray" \| "eggplant" \| "gray" \| "green" \| "lightGray" \| "maroon" \| "midnight" \| "navy" \| "olive" \| "orange" \| "orchid" \| "pine" \| "purple" \| "red" \| "watermelon" \| "white"`	`"darkGray"`
`inline`	`boolean`	`false`
`italic`	`boolean`	`false`
`lineClamp`	`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.
`overflow`	`"normal" \| "breakWord" \| "noWrap"`	`"breakWord"`
`size`	`"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.
`underline`	`boolean`	`false`
`weight`	`"bold" \| "normal"`	`"normal"`

Alignment

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

<Box maxWidth="16em">
  <Text align="start">Start (default)</Text>
  <Text align="end">End</Text>
  <Text align="center">Center</Text>
  <Text align="justify">Justify</Text>
  <Text align="forceLeft">Force left</Text>
  <Text align="forceRight">Force right</Text>
</Box>

<Box maxWidth="16em">
  <Text align="start">Start (default)</Text>
  <Text align="end">End</Text>
  <Text align="center">Center</Text>
  <Text align="justify">Justify</Text>
  <Text align="forceLeft">Force left</Text>
  <Text align="forceRight">Force right</Text>
</Box>

Block vs inline

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

<Flex alignItems="start" direction="column" gap={4}>
  <Text>Some content in a default block element. (default)</Text>
  <Box>
    <Text inline>Inline text with the inline prop.</Text>
    {' '}
    <Text inline>More inline text.</Text>
  </Box>
</Flex>

<Flex alignItems="start" direction="column" gap={4}>
  <Text>Some content in a default block element. (default)</Text>
  <Box>
    <Text inline>Inline text with the inline prop.</Text>
    {' '}
    <Text inline>More inline text.</Text>
  </Box>
</Flex>

Colors

You can specify which color you want for your text.

<Flex alignItems="start" direction="column" gap={4}>
  <Box color="darkGray" padding={1}>
    <Text color="white">White</Text>
  </Box>
  <Text color="gray">Gray</Text>
  <Text color="darkGray">Dark Gray (default)</Text>
  <Text color="blue">Blue</Text>
  <Text color="red">Red</Text>
</Flex>

<Flex alignItems="start" direction="column" gap={4}>
  <Box color="darkGray" padding={1}>
    <Text color="white">White</Text>
  </Box>
  <Text color="gray">Gray</Text>
  <Text color="darkGray">Dark Gray (default)</Text>
  <Text color="blue">Blue</Text>
  <Text color="red">Red</Text>
</Flex>

Overflow

Gestalt provides utility options to deal with text overflow.

<Flex direction="column" gap={2} maxWidth={180}>
  <Text weight="bold">breakWord (default):</Text>
  <Text>
    This is a long and Supercalifragilisticexpialidocious sentence.
    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ&#39;
  </Text>

  <Text weight="bold">normal:</Text>
  <Text overflow="normal">
    This is a long and Supercalifragilisticexpialidocious sentence.
    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉&#39;
  </Text>

  <Text weight="bold">noWrap:</Text>
  <Text overflow="noWrap">
    This is a long and Supercalifragilisticexpialidocious sentence.
  </Text>

  <Text weight="bold">lineClamp:</Text>
  <Text lineClamp={2}>
    This is a long and Supercalifragilisticexpialidocious sentence.
  </Text>
</Flex>

<Flex direction="column" gap={2} maxWidth={180}>
  <Text weight="bold">breakWord (default):</Text>
  <Text>
    This is a long and Supercalifragilisticexpialidocious sentence.
    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
    ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ&#39;
  </Text>

  <Text weight="bold">normal:</Text>
  <Text overflow="normal">
    This is a long and Supercalifragilisticexpialidocious sentence.
    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉&#39;
  </Text>

  <Text weight="bold">noWrap:</Text>
  <Text overflow="noWrap">
    This is a long and Supercalifragilisticexpialidocious sentence.
  </Text>

  <Text weight="bold">lineClamp:</Text>
  <Text lineClamp={2}>
    This is a long and Supercalifragilisticexpialidocious sentence.
  </Text>
</Flex>

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.

<Flex alignItems="start" direction="column" gap={2}>
  <Flex alignItems="center" gap={2}>
    <Text inline size="100">Size 100</Text>
    <span lang="ja">
      <Text inline size="100">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="200">Size 200</Text>
    <span lang="ja">
      <Text inline size="200">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="300">Size 300 (default size)</Text>
    <span lang="ja">
      <Text inline size="300">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="400">Size 400</Text>
    <span lang="ja">
      <Text inline size="400">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="500">Size 500</Text>
    <span lang="ja">
      <Text inline size="500">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="600">Size 600</Text>
    <span lang="ja">
      <Text inline size="600">
        こんにちは
      </Text>
    </span>
  </Flex>
</Flex>

<Flex alignItems="start" direction="column" gap={2}>
  <Flex alignItems="center" gap={2}>
    <Text inline size="100">Size 100</Text>
    <span lang="ja">
      <Text inline size="100">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="200">Size 200</Text>
    <span lang="ja">
      <Text inline size="200">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="300">Size 300 (default size)</Text>
    <span lang="ja">
      <Text inline size="300">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="400">Size 400</Text>
    <span lang="ja">
      <Text inline size="400">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="500">Size 500</Text>
    <span lang="ja">
      <Text inline size="500">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={2}>
    <Text inline size="600">Size 600</Text>
    <span lang="ja">
      <Text inline size="600">
        こんにちは
      </Text>
    </span>
  </Flex>
</Flex>

Styles

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

<Flex direction="column" gap={2}>
  <Text weight="bold">Bold</Text>
  <Text italic>Italic</Text>
  <Text underline>Underline</Text>
</Flex>

<Flex direction="column" gap={2}>
  <Text weight="bold">Bold</Text>
  <Text italic>Italic</Text>
  <Text underline>Underline</Text>
</Flex>

Edit page on GitHub