@bento/heading

Heading

The @bento/heading package exports the Heading component primitive.

Installation

npm install --save @bento/heading

Props

The @bento/heading package exports the Heading component:

<Source language='tsx' code={ DefaultExample } />

The following properties are available to be used on the Heading component:

Examples

Level

Setting the level prop allows you to change the HTML tag of the Heading component. Without a level prop, the Heading component will render as a span element. This is because we cannot assume the appropriate heading level for the content without context.

<Source language='tsx' code={ LevelExample } />

Provider

The HeadingProvider component allows you to set the heading level for the Heading component by way of nesting.

<Source language='tsx' code={ ProviderExample } />

Override

Even when using the HeadingProvider component, you can override the heading level by passing the level prop to the Heading component.

<Source language='tsx' code={ OverrideExample } />