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.
(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>
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.
<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()
.
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>
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.
Underline
I18N
Citation
Emphasis
Inserted
Ctrl + C
Highlighted
Sample
sub
sup
<><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