Text
Text is the used to render text and paragraphs within an interface. It renders a
<p> tag by default.
import { Text } from "@chakra-ui/core"
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
<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>
Editable Example
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.
<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>
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.
<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>
<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>
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
<Text fontSize="50px" color="tomato">
I'm using a custom font-size value for this text
</Text>
Editable Example
To override the element that gets rendered, pass the as prop. Use Inspect
Element to see the element that gets rendered in html.
ItalicUnderlineI18NCitationDeletedEmphasisInsertedCtrl + CHighlightedStrikethroughSamplesubsup <>
<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>
</>
Editable Example
Text composes the Box component, so you can pass all Box
style props.