Live code
Storybook
Usage
Text
The Text component provides helper classes to render text.
<Text size="large" emphasis="bold" />API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| elementType | React.Element | p | ✕ | HTML tag |
| emphasis | [italic | bold] | — | ✕ | Emphasis of the text |
| size | Size Extended dictionary | medium | ✕ | Size of the text |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
Custom component
Text classes are fabricated using useTextStyleProps hook. You can use it to create your own custom Text component.
const CustomText = (props: SpiritTextProps): JSX.Element => {
const { classProps, props: modifiedProps, children } = useTextStyleProps(props);
return (
<p className={classProps} {...modifiedProps}>
{children}
</p>
);
};