Text

Text component is the used to render text and paragraphs within an interface. It renders a <p> tag by default.

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#

Pass the isTruncated prop to render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

<Text color='gray.500' isTruncated>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and
  publishing industries for previewing layouts and visual mockups.
</Text>

Likewise, if you'd like to truncate the text after a specific number of lines, pass the noOfLines prop and set it to the desired no of lines.

Pro Tip 💡: You can also apply noOfLines responsively.

// Basic version
<Text noOfLines={2}>
  "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='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>
</>

`styleConfig`

Type

Dict<any>

`variant`

Description

Variants for Text are not implemented in the default theme. You can extend the theme to implement them.

Type

string