Heading

A heading is a typography component used to display text in different sizes and formats.

Examples Code Usage Migration to size prop Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/heading`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/heading, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

Heading props

`as`
Description	Allows the component to be rendered as the specified HTML element, overriding a default element set by the `size` prop.
Type	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "div" \| "span"`

`children`
Required
Description	The text of the heading.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`color`
Description	Token representing text color with a built-in fallback value. Will apply inverse text color automatically if placed within a Box with bold background color. Defaults to `color.text`.
Type	`"color.text" \| "color.text.inverse" \| "color.text.warning.inverse"`

`id`
Description	Unique identifier for the heading HTML element.
Type	`string`

`ref`
Description	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
Type	`string \| Ref<HTMLHeadingElement>`

`size`
Required
Description	Determines which text styles are applied. A corresponding HTML element is automatically applied from h1 to h6 based on the size. This can be overriden using the `as` prop to allow for more flexibility.
Type	`"xxlarge" \| "xlarge" \| "large" \| "medium" \| "small" \| "xsmall" \| "xxsmall"`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

Heading context provider props

`children`
Required
Description	Semantic hierarchy of content below the heading context.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`value`
Description	Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
Type	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9`

Was this page helpful?

We use this feedback to improve our documentation.