Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting