Text

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.
Ads via Chakra UI

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.

(6xl) In love with React & Next

(5xl) In love with React & Next

(4xl) In love with React & Next

(3xl) In love with React & Next

(2xl) In love with React & Next

(xl) In love with React & Next

(lg) In love with React & Next

(md) In love with React & Next

(sm) In love with React & Next

(xs) In love with React & Next

Editable Example

Truncate text#

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

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Editable Example

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().

I'm using a custom font-size value for this text

Editable Example

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.

Italic
Underline
I18N
Citation
Deleted
Emphasis
Inserted
Ctrl + C
Highlighted
Strikethrough
Sample
sub
sup
Editable Example

Props#

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

NameTypeDescriptionDefault
alignSystemProps["textAlign"]The CSS `text-align` property-
casingSystemProps["textTransform"]The CSS `text-transform` property-
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Color Schemes for Text are not implemented in the default theme. You can extend the theme to implement them.-
decorationSystemProps["textDecoration"]The CSS `text-decoration` property-
isTruncatedbooleanif `true`, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set.-
noOfLinesnumber | ResponsiveArray<number> | Partial<Record<string, number>>Used to truncate text at a specific number of lines-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page