Text
Component that displays plain text
Usage
import Text from "@appserver/components/text";
<Text as="p" title="Some title">
Some text
</Text>
If you need to override styles add forwardedAs instead of as
const StyledText = styled(Text)`
&:hover {
border-bottom: 1px dotted;
}
`;
<StyledText forwardedAs="span" title="Some title">
Some text
</StyledText>
Properties
Props |
Type |
Required |
Values |
Default |
Description |
as |
string |
- |
- |
p |
Sets the tag through which to render the component |
backgroundColor |
string |
- |
- |
- |
Sets background color |
color |
string |
- |
- |
#333333 |
Specifies the text color |
display |
string |
- |
- |
- |
Sets the 'display' property |
fontSize |
string |
- |
- |
13px |
Sets the font size |
fontWeight |
oneOfType(number, string) |
- |
- |
- |
Sets the font weight |
isBold |
bool |
- |
- |
false |
Sets font weight value to bold |
isInline |
bool |
- |
- |
false |
Sets the 'display: inline-block' property |
isItalic |
bool |
- |
- |
false |
Sets the font style |
title |
bool |
- |
- |
- |
Title |
truncate |
bool |
- |
- |
false |
Disables word wrapping |