Live code
Storybook
Usage
Heading
The Heading component provides helper classes to render headings.
<Heading elementType="h1" size="large" />API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| elementType | React.Element | div | ✕ | HTML tag |
| 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
Heading classes are fabricated using useHeadingStyleProps hook. You can use it to create your own custom Heading component.
const CustomText = (props: SpiritHeadingProps): JSX.Element => {
const { classProps, props: modifiedProps, children } = useHeadingStyleProps(props);
return (
<div className={classProps} {...modifiedProps}>
{children}
</div>
);
};