font-size, font-weight, line-height and some other settings - can be set in the theme.| Name | Type | Default | Description |
|---|---|---|---|
| children or label | node | The content of the component. | |
| variant | string - body, h1, h2, ... theme variants | body | The variant to use. |
| disabled | bool | false | If true, the component use disabled color. |
| variantMapping | object | {h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body: 'p', 'button-large': 'div', 'button-default': 'div', 'button-small': 'div', 'button-inline': 'span', 'label1': 'div', 'label2': 'div',} | The component maps the variant prop to a range of different HTML element types. If you wish to change that mapping, you can provide your own. Alternatively, you can use the Component prop. |
| Component | element type | variant && variantMapping[variant] ? variantMapping[variant] : 'div' | The component used for the root node. Either a string to use a HTML element or a component. |
| gutterBottom | bool | false | If true, the text will have a bottom margin. |
| bolder | bool | Bolder font weight. | |
| lighter | bool | Lighter font weight. | |
| weight | number | Custom font weight 100, 200, 300, 400, 500, 600, 700, 800, and 900. | |
| fontSize | string | Can custom font size with this property. It sets the --digby-typography-font-size css variable. |
ref is forwarded to the root element.body