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>
<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>
<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>
// 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>
<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>
</>
<>
<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>
</>

Props#

Text composes the Box component, so you can pass all Box style props.

align

Description

The CSS `text-align` property

Type
SystemProps["textAlign"]

casing

Description

The CSS `text-transform` property

Type
SystemProps["textTransform"]

colorScheme

Description

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

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

decoration

Description

The CSS `text-decoration` property

Type
SystemProps["textDecoration"]

orientation

Type
"horizontal" | "vertical"

size

Type
string

styleConfig

Type
Record<string, any>

variant

Type
string

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License