Text
Text is a basic component that allows you to display text content on the page.
Import
import { Text } from 'rsuite';Examples
Default
Color
Weight
Size
Override the element
Text align
Text transform
Max lines truncation
Note: The
maxLinesprop is not supported in IE Browser.
Props
<Text>
| Property | Type(Default) |
Description |
|---|---|---|
| align | 'left' | 'center' | 'right' | 'justify' | The alignment of the text. |
| as | ElementType(div) |
Custom element type for the component. |
| classPrefix | string ('text') |
The prefix of the component CSS class. |
| color | Color | The color of the text. |
| maxLines | number | The number of lines to limit the provided text to. Text will be truncated with an ellipsis. |
| muted | boolean | Whether the text is muted. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string | The size of the text. |
| transform | 'uppercase' | 'lowercase' | 'capitalize' | The transformation of the text. |
| weight | 'thin' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | The weight of the text. |
ts:Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';