Text

Text is the used to render text and paragraphs within an interface.

    Import#

    import { Text } from '@chakra-ui/react'

    Changing the font size#

    To increase the font size of the text, you can pass the fontSize prop.

    <Stack spacing={3}>
      <Text fontSize="6xl">(6xl) In love with React & Next</Text>
      <Text fontSize="5xl">(5xl) In love with React & Next</Text>
      <Text fontSize="4xl">(4xl) In love with React & Next</Text>
      <Text fontSize="3xl">(3xl) In love with React & Next</Text>
      <Text fontSize="2xl">(2xl) In love with React & Next</Text>
      <Text fontSize="xl">(xl) In love with React & Next</Text>
      <Text fontSize="lg">(lg) In love with React & Next</Text>
      <Text fontSize="md">(md) In love with React & Next</Text>
      <Text fontSize="sm">(sm) In love with React & Next</Text>
      <Text fontSize="xs">(xs) In love with React & Next</Text>
    </Stack>

    Truncate text#

    If you'd like to truncate the text after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

    // Basic version
    <Text noOfLines={1}>
      "The quick brown fox jumps over the lazy dog" is an English-language pangram—a
      sentence that contains all of the letters of the English alphabet. Owing to
      its existence, Chakra was created.
    </Text>
    

    // Responsive version
    <Text noOfLines={[1, 2, 3]}>
       "The quick brown fox jumps over the lazy dog" is an English-language pangram—a
      sentence that contains all of the letters of the English alphabet. Owing to
      its existence, Chakra was created.
    </Text>

    Override style#

    You can change the entire style of the text via props. For example, to change the font size, pass the fontSize prop. No need to write css or styled().

    <Text fontSize="50px" color="tomato">
      I'm using a custom font-size value for this text
    </Text>

    Override the element#

    To override the element that gets rendered, pass the as prop. Use Inspect Element to see the element that gets rendered in html.

    <>
      <Text as="b">Bold</Text>
      <br />
      <Text as="i">Italic</Text>
      <br />
      <Text as="u">Underline</Text>
      <br />
      <Text as="abbr">I18N</Text>
      <br />
      <Text as="cite">Citation</Text>
      <br />
      <Text as="del">Deleted</Text>
      <br />
      <Text as="em">Emphasis</Text>
      <br />
      <Text as="ins">Inserted</Text>
      <br />
      <Text as="kbd">Ctrl + C</Text>
      <br />
      <Text as="mark">Highlighted</Text>
      <br />
      <Text as="s">Strikethrough</Text>
      <br />
      <Text as="samp">Sample</Text>
      <br />
      <Text as="sub">sub</Text>
      <br />
      <Text as="sup">sup</Text>
    </>
    Edit this page on GitHub