Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Text

Text is a component that represents a paragraph of text. By default, it renders a p element.

Source@yamada-ui/typography

Import

import { Text } from "@yamada-ui/react"
Copied!

Usage

Editable example

<Text>
  私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Text>
Copied!

Change Size

Editable example

<VStack>
  <For each={["6xl", "5xl", "4xl", "3xl", "2xl", "xl", "lg", "md", "sm", "xs"]}>
    {(fontSize, index) => (
      <Text key={index} fontSize={fontSize} isTruncated>
        私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Text>
    )}
  </For>
</VStack>
Copied!

Using as

By passing as, you can render it as a different element or component.

Editable example

<VStack>
  <For
    each={[
      "b",
      "i",
      "u",
      "abbr",
      "del",
      "em",
      "ins",
      "kbd",
      "mark",
      "s",
      "samp",
      "sub",
    ]}
  >
    {(as, index) => (
      <Text key={index} as={as}>
        へっ！きたねぇ花火だ
      </Text>
    )}
  </For>
</VStack>
Copied!

Truncate Text

If you want to truncate text after a certain number of lines, specify the number of lines with lineClamp. If the text exceeds the specified number of lines, an ellipsis will be displayed.

Editable example

<VStack>
  <For each={[3, 2, 1]}>
    {(lineClamp, index) => (
      <Text key={index} fontSize="2xl" lineClamp={lineClamp}>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </Text>
    )}
  </For>
</VStack>
Copied!

Add Gradient

Editable example

<Text
  w="full"
  fontSize="xl"
  fontWeight="bold"
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
>
  やるじゃねえかサタン！おめえはホントに世界の救世主かもな！
</Text>
Copied!

Edit this page on GitHub

PreviousTypographyNextHeading