Text component is the used to render text and paragraphs within an interface.
It renders a <p> tag by default.
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
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.
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
noOfLinesresponsively.
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
To override the element that gets rendered, pass the as prop. Use Inspect
Element to see the element that gets rendered in html.
Text composes the Box component, so you can pass all Box
style props.
| Name | Type | Description | Default |
|---|---|---|---|
| align | SystemProps["textAlign"] | The CSS `text-align` property | - |
| casing | SystemProps["textTransform"] | The CSS `text-transform` property | - |
| colorScheme | string | - | |
| css | Interpolation<{}> | The emotion's css style object | - |
| decoration | SystemProps["textDecoration"] | The CSS `text-decoration` property | - |
| isTruncated | boolean | if `true`, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set. | - |
| layerStyle | string | apply layer styles defined in `theme.layerStyles` | - |
| noOfLines | number | ResponsiveArray<number> | ResponsiveObject<number> | Used to truncate text at a specific number of lines | - |
| orientation | "horizontal" | "vertical" | - | |
| size | string | - | |
| styleConfig | Record<string, any> | - | |
| textStyle | string | apply typography styles defined in `theme.textStyles` | - |
| variant | string | - |