Heading

Installation

Package

@bigbang/ui

Import

import { Heading } from '@bigbang/ui';

Source

Heading.tsx

Storybook

Heading · Playground

Heading is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

import { Heading } from '@bigbang/ui';

<Heading level={2}>...</Heading>;
<Heading level={2} size="sm">...</Heading>;

Props

levelRequired

Description

Document level, <h1> to <h6>. Required: heading order is part of the page structure. One h1 per page; do not skip levels inside a section.

Type

1 | 2 | 3 | 4 | 5 | 6

size

Description

Visual size: 16, 20, 24 and 32 px. Defaults from level (1 xl, 2 lg, 3 md, 4-6 sm); set it when the design needs a different size at the same level.

Type

'sm' | 'md' | 'lg' | 'xl'

className

Description

For layout only: margins and alignment. Do not use it to change the size or colour.

Type

string

childrenRequired

Description

The heading text. It wraps and is never truncated.

Type

ReactNode

Native heading attributes (id, aria-*) are passed through.

Data attributes

• data-component="heading": on the root element.