Maturity
This component is for Code only.
Overview
In most cases, Text should fulfill the need to set a visual hierarchy for sections. But if there is a need for a localized version, Text Primitive is a great base to work from. Try to use Text whenever possible. If, for some reason it doesn’t fit your needs, let us know #design-system.
Related content
Properties
|
Name |
Values |
Default |
|---|---|---|
|
align Set the horizontal text alignment, based on text-align. Works with dir to correctly set the directionality. |
end, start, center, justify |
– |
|
color Set the text color with any valid CSS color |
string |
– |
|
dir Indicates the directionality of the element's text, based on dir |
auto, ltr, rtl |
– |
|
hidden Whether an element is completely hidden on the page |
boolean |
– |
|
id The id of the element |
string |
– |
|
inline Render text inline instead of as a block |
boolean |
– |
|
size The font size |
string |
– |
|
transform Case transformations of text, based on text-transform |
uppercase, lowercase, capitalize |
– |
|
truncate Truncate the text based on it’s width |
boolean |
– |
|
whiteSpace Set how the white space inside the text is handled, based on white-space |
pre, normal, nowrap, pre-wrap, break-spaces, pre-line |
– |
How to use
Because Text is built with Text Primitive, it has all the features and functionality with the added ability to be styled.
const NewText = styled(TextPrimitive)`
font-size: 14px;
color: blue;
`;
<NewText truncate>Lorem ipsum</NewText>