components
Text (code)
The Text component is a very generic component that support a wide range of text styles.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| as | Node | 'span' | - | Change the rendered HTML tag e.g. span, p, h1 |
| children | Node | - | true | Content for component *required |
| className | String | - | - | Extend classNames. |
| color | String | - | - | Changes the Paragraph's color, choose one of the tokens. |
| decoration | 'inherit''none''underline''line-through' | - | - | Changes the Caption's text-decoration. |
| fontFamily | 'inherit''primary''secondary''system' | - | - | FontFamily of font-system |
| fontStyle | 'inherit''normal''italic''oblique' | - | - | Sets the css font-style property. |
| fontWeight | 'inherit''regular''medium''bold' | - | - | Sets the css font-weight property. |
| size | 'Heading1''Heading2''Heading3''Heading4''Heading5''Heading6''Paragraph''Caption1''Caption2' | 'Heading6' | - | Size on the scale |
| style | {} | - | - | Extend style |
| textAlign | 'inherit''left''right''center''justify' | - | - | textAlign css property. |
| textTransform | 'inherit''none''capitalize''uppercase''lowercase' | - | - | textTransform css property. |
System Props
color
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
m, mb, ml, mr, mt, mx, my
fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform
float
display
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Related components
While this Text component is meant for ultimate flexibility when it comes to text-related requirements, there are also other text-related predefined components.
These are:
The reason these separate components also exist, is purely for developer experience. The above components can be constructed by combining the necessary parameters on the Text component (internally, the above components are an extension of the Text component). However, they have default behaviour built in, e.g. the Heading component will automatically add a bold fontWeight and will change its HTML element based in the size, etc.
Size
default: Heading6
The size property corresponds to all the possible sizes defined in the typography foundations.
The default here is Heading6. This size is the best default to fall back to, since it has an average font-size and corresponding line-height. The difference with Paragraph is not the font-size, but rather the line-height. Paragraph size has a line-height that is 1.5 times the font-size, which improves readability in paragraphs of text, but is not suited as a default size.
NOTE: The size does not translate to a certain HTML element. If you want to customize the HTML element, use the as prop as well.
FontFamily
default: inherit
Font-families can be used to discern between multiple uses.
TextTransform
default: inherit
TextAlign
default: inherit
Controls the css text-align attribute.
FontWeight
default: inherit
Controls the font-weight css attribute. Only 3 values are available. If a value is missing, it will fallback on the more bold weight.
Decoration
default: inherit
Controls the text-decoration css attribute.