Text
Text is a basic component that allows you to display text content on the page.
Import
import { Text } from 'rsuite';Examples
Default
Rendering...
Color
Rendering...
Weight
Rendering...
| Weight | Font weight |
|---|---|
| thin | 100 |
| light | 300 |
| regular | 400 |
| medium | 500 |
| semibold | 600 |
| bold | 700 |
| extrabold | 800 |
Size
Rendering...
| Size | Font size |
|---|---|
| sm | 12px |
| md | 14px |
| lg | 16px |
| xl | 18px |
| xxl | 24px |
Override the element
Rendering...
Text align
Rendering...
Text transform
Rendering...
Max lines truncation
Rendering...
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. |
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';