Text
Maintainer:
IsaevAlexandr
variant
text
ellipsis
whiteSpace
wordBreak
color
import {Text} from '@gravity-ui/uikit';
Variant
These are the default fonts that can be overridden in the project. You can see a list of all available fonts here.
some textsome textsome text
<Text variant="body-1">some text</Text>
<Text variant="caption-2">some text</Text>
<Text variant="display-3">some text</Text>Ellipsis
This property allows you to hide the overflowing text:
false: Used by default.
true: Hidden overflow content will be replaced with an ellipsis (…).
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!
<Text ellipsis={false}>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>
<Text ellipsis={true}>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>White Space
This stands for the white-space CSS property. It can be either nowrap or break-spaces.
Lorem ipsum dolor sit, amet consectetur adipisicing elit.Lorem ipsum dolor sit, amet consectetur adipisicing elit.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<Text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</Text>
<Text whiteSpace={"nowrap"}>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</Text>
<Text whiteSpace={"break-spaces"}>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</Text>Word Break
This stands for the word-break CSS property. The only available value is break-all. | break-word.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!
<Text>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>
<Text wordBreak="break-all">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam!</Text>Color
Specifies the text color. The available colors are:
primary, complementary, secondary, hint, info, info-heavy, positive, positive-heavy, warning, warning-heavy, danger, danger-heavy, utility, utility-heavy, misc, misc-heavy, brand, link, link-hover, link-visited, link-visited-hover, dark-primary, dark-complementary, dark-secondary, light-primary, light-complementary, light-secondary, light-hint, inverted-primary, inverted-complementary, inverted-secondary, and inverted-hint.
some textsome textsome text
<Text color="info">some text</Text>
<Text color="positive">some text</Text>
<Text color="warning">some text</Text>Properties
| Name | Description | Type | Default |
|---|---|---|---|
| children | Text content | React.ReactNode | |
| className | class HTML attribute | string | |
| id | id HTML attribute | string | |
| as | Enables overriding default HTML tag | React.ElementType<any> | |
| style | style HTML attribute | React.CSSProperties | |
| variant | Text font | string | "body-1" |
| ellipsis | Hidden overflow content will be replaced with an ellipsis | boolean | |
| ellipsisLines | The number of whole lines of text after which the content will be cut off | number | |
| whiteSpace | white-space CSS property | "nowrap" "break-spaces" | |
| wordBreak | word-break CSS property | "break-all" "break-word" | |
| color | Text color | string (see the values in the Color section) | |
| qa | data-qa HTML attribute, used for testing | string |