The CSS `text-align` property
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, andpublishing industries for previewing layouts and visual mockups.</Text>
<Text color="gray.500" isTruncated>Lorem ipsum is placeholder text commonly used in the graphic, print, andpublishing 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—asentence that contains all of the letters of the English alphabet. Owing toits 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—asentence that contains all of the letters of the English alphabet. Owing toits existence, Chakra was created.</Text>
// Basic version<Text noOfLines={2}>"The quick brown fox jumps over the lazy dog" is an English-language pangram—asentence that contains all of the letters of the English alphabet. Owing toits 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—asentence that contains all of the letters of the English alphabet. Owing toits 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
align
SystemProps["textAlign"]
casing
casing
The CSS `text-transform` property
SystemProps["textTransform"]
colorScheme
colorScheme
Color Schemes for Text
are not implemented in the default theme. You can extend the theme to implement them.
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
decoration
decoration
The CSS `text-decoration` property
SystemProps["textDecoration"]
orientation
orientation
"horizontal" | "vertical"
size
size
string
styleConfig
styleConfig
Record<string, any>
variant
variant
string
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web