Text
Text is a basic component that allows you to display text content on the page.
Import
import { Text } from 'rsuite';Examples
Default
This is a default text
This is a muted text
Color
Red text
Orange text
Yellow text
Green text
Cyan text
Blue text
Violet text
Weight
Thin text
Light text
Regular text (default)
Medium text
Semibold text
Bold text
Extrabold text
| Weight | Font weight |
|---|---|
| thin | 100 |
| light | 300 |
| regular | 400 |
| medium | 500 |
| semibold | 600 |
| bold | 700 |
| extrabold | 800 |
Size
Text size: Small
Text size: Medium (default)
Text size: Large
Text size: Extra Large
Text size: Double Extra Large
Text size: Custom size `2rem`
| Size | Font size |
|---|---|
| sm | 12px |
| md | 14px |
| lg | 16px |
| xl | 18px |
| xxl | 24px |
Override the element
quote
"Technology is anything that was invented after you were born, everything else is just stuff." — Alan Kay
Preserve line breaks in text.
Preserve line breaks in text.
Preserve line breaks in text.
Text align
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text transform
capitalize
uppercase
lowercase
Max lines truncation
Max lines is 1: This is a long text that will be truncated with an ellipsis. To demonstrate the effect, we copied the text several times. This is a long text that will be truncated with an ellipsis. To demonstrate the effect, we copied the text several times. This is a long text that will be truncated with an ellipsis. To demonstrate the effect, we copied the text several times.
Max lines is 2: This is a long text that will be truncated with an ellipsis. To demonstrate the effect, we copied the text several times. This is a long text that will be truncated with an ellipsis. To demonstrate the effect, we copied the text several times. This is a long text that will be truncated with an ellipsis. To demonstrate the effect, we copied the text several times.
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';