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#

<Heading>I'm a Heading</Heading>

<Heading>I'm a Heading</Heading>

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.

<Stack spacing={6}>
  <Heading as="h1" size="4xl" isTruncated>
    (4xl) In love with React & Next
  </Heading>
  <Heading as="h2" size="3xl" isTruncated>
    (3xl) In love with React & Next
  </Heading>
  <Heading as="h2" size="2xl">
    (2xl) In love with React & Next
  </Heading>
  <Heading as="h2" size="xl">
    (xl) In love with React & Next
  </Heading>
  <Heading as="h3" size="lg">
    (lg) In love with React & Next
  </Heading>
  <Heading as="h4" size="md">
    (md) In love with React & Next
  </Heading>
  <Heading as="h5" size="sm">
    (sm) In love with React & Next
  </Heading>
  <Heading as="h6" size="xs">
    (xs) In love with React & Next
  </Heading>
</Stack>

<Stack spacing={6}>
  <Heading as="h1" size="4xl" isTruncated>
    (4xl) In love with React & Next
  </Heading>
  <Heading as="h2" size="3xl" isTruncated>
    (3xl) In love with React & Next
  </Heading>
  <Heading as="h2" size="2xl">
    (2xl) In love with React & Next
  </Heading>
  <Heading as="h2" size="xl">
    (xl) In love with React & Next
  </Heading>
  <Heading as="h3" size="lg">
    (lg) In love with React & Next
  </Heading>
  <Heading as="h4" size="md">
    (md) In love with React & Next
  </Heading>
  <Heading as="h5" size="sm">
    (sm) In love with React & Next
  </Heading>
  <Heading as="h6" size="xs">
    (xs) In love with React & Next
  </Heading>
</Stack>

Truncate heading#

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

<Heading isTruncated>
  Basic text writing, including headings, body text, lists, and more.
</Heading>

<Heading isTruncated>
  Basic text writing, including headings, body text, lists, and more.
</Heading>

Override style#

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

<Heading size="lg" fontSize="50px">
  I'm overriding this heading
</Heading>

<Heading size="lg" fontSize="50px">
  I'm overriding this heading
</Heading>

Composition#

// Example from paystack.com
<LightMode>
  <Box maxW="32rem">
    <Heading mb={4}>Modern online and offline payments for Africa</Heading>
    <Text fontSize="xl">
      Paystack helps businesses in Africa get paid by anyone, anywhere in the
      world
    </Text>
    <Button size="lg" colorScheme="green" mt="24px">
      Create a free account
    </Button>
  </Box>
</LightMode>

// Example from paystack.com
<Box maxW="32rem">
  <Heading mb={4}>Modern online and offline payments for Africa</Heading>
  <Text fontSize="xl">
    Paystack helps businesses in Africa get paid by anyone, anywhere in the
    world
  </Text>
  <Button size="lg" colorScheme="green" mt="24px">
    Create a free account
  </Button>
</Box>

Props#

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

`colorScheme`

Description

Color Schemes for Heading are not implemented in the default theme. You can extend the theme to implement them.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`orientation`

Type

"horizontal" | "vertical"

`size`

Type

"sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl"

Default

"xl"

`styleConfig`

Type

Record<string, any>

`variant`

Description

Variants for Heading are not implemented in the default theme. You can extend the theme to implement them.

Type

string