Heading

Headings are used for rendering headlines.

Heading composes Box so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

Import#

import { Heading } from "@chakra-ui/react"

Usage#

I'm a Heading

Editable Example

Changing font size#

To increase the size of the heading, you can use the fontSize or size props. If you use the size prop, the font size of the heading will automatically decrease in size for smaller screens.

(4xl) In love with React & Next

(3xl) In love with React & Next

(2xl) In love with React & Next

(xl) In love with React & Next

(lg) In love with React & Next

(md) In love with React & Next

(sm) In love with React & Next
(xs) In love with React & Next
Editable Example

Truncate heading#

Pass the isTruncated prop to render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

Basic text writing, including headings, body text, lists, and more.

Editable Example

Override style#

You can override the size of the Heading component by passing the fontSize prop. No need to write css or styled().

I'm overriding this heading

Editable Example

Composition#

Modern online and offline payments for Africa

Paystack helps businesses in Africa get paid by anyone, anywhere in the world

Editable Example

Props#

The Heading composes the Box component, so you can pass all Box props.

NameTypeDescriptionDefault
colorSchemestring-
isTruncatedbooleanif `true`, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set.-
layerStylestringapply layer styles defined in `theme.layerStyles`-
noOfLinesnumber | ResponsiveArray<number> | ResponsiveObject<number>Used to truncate text at a specific number of lines-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
textStylestringapply typography styles defined in `theme.textStyles`-
variantstring-
Edit this page