Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Typography

/

Heading

The Heading component takes in a string and displays it as a heading.

Hello World!

rx.chakra.heading("Hello World!")

The size can be changed using the size prop.

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

rx.chakra.vstack(
    rx.chakra.heading(
        "Hello World!", size="sm", color="red"
    ),
    rx.chakra.heading(
        "Hello World!", size="md", color="blue"
    ),
    rx.chakra.heading(
        "Hello World!", size="lg", color="green"
    ),
    rx.chakra.heading(
        "Hello World!", size="xl", color="blue"
    ),
    rx.chakra.heading(
        "Hello World!", size="2xl", color="red"
    ),
    rx.chakra.heading(
        "Hello World!", size="3xl", color="blue"
    ),
    rx.chakra.heading(
        "Hello World!", size="4xl", color="green"
    ),
)

It can also be styled using regular CSS styles.

Hello World!

rx.chakra.heading("Hello World!", font_size="2em")

A page heading.

PropTypeDescriptionValues
as_str

Override the tag. The default tag is <h2>.

sizeLiteral

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

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting