FoundationsText
Text
Renders body text with consistent size, weight, colour and leading.
TextProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
align | CSSProperties['textAlign']inherit|-moz-initial|initial|revert|unset|center|end|justify|left|match-parent|right|start | — | — | The horizontal alignment. |
color | TextColorKey | 'inherit'critical|warning|info|success|accent|textPrimary|textBody|textSecondary|textTertiary|textDisabled|textLink|inherit | — | — | The color of the text. |
inline | boolean | — | — | Display as an inline-level element. |
leading | keyof BalanceTheme['typography']['leading']tighter|tight|base|loose|looser | — | — | The leading of the text. |
numberOfLines | number | — | — | Truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Will override the `overflowStrategy` prop. |
overflowStrategy | OverflowStrategyTypenowrap|wrap|truncate|breakword | — | wrap | Manage how text behaves with regard to overflow. |
size | xsmall|small|medium|large|xlarge | — | — | The size of the text. |
tabularNumbers | boolean | — | — | Enable to make numbers the same width. |
transform | CSSProperties['textTransform']inherit|-moz-initial|initial|revert|unset|capitalize|full-size-kana|full-width|lowercase|none|uppercase | — | — | Transform the text casing. |
weight | keyof BalanceTheme['typography']['fontWeight']medium|regular|semibold|bold|heavy | — | — | The font-weight of the text. |
Also accepts ValidBoxProps | ||||