# HeadingProps

**Kind:** Interface

Props for the `Heading` component. Also supports:
* `AllStylesProps`
* `AriaProps`

## Properties

### `as?`

Type: `"h1" | "h2" | "h3" | "h4" | "h5" | "h6"`

The element that is rendered. Defaults to `h3`.

### `children?`

Type: `React.ReactNode | string`

The contents of the heading.

### `className?`

Type: `undefined | string`

Additional class names to apply, separated by spaces.

### `dataAttributes?`

Type: `DataAttributesProp`

Data attributes that are spread onto the element, e.g. `dataAttributes={{'data-*': '...'}}`.

### `id?`

Type: `undefined | string`

The `id` attribute.

### `role?`

Type: `undefined | string`

The `role` attribute.

### `size?`

Type: `HeadingSizeProp`

The size of the heading. Defaults to `default`. Can be a responsive prop object.

### `style?`

Type: `React.CSSProperties`

Additional styles.

### `variant?`

Type: `HeadingVariant`

The variant of the heading. Defaults to `default`.

---

## Heading

**Kind:** Component

A heading component with sizes and variants.

[[ Story id="heading--example" title="Heading example" ]]

**Parameters:**
- `props` (`HeadingProps`)
- `ref` (`React.Ref<HTMLHeadingElement>`)

**Returns:** `Element`