Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Forms

/

Button

Buttons are essential elements in your application's user interface that users can click to trigger events. This documentation will help you understand how to use button components effectively in your Reflex application.

A basic button component is created using the rx.chakra.button method:

rx.chakra.button("Click Me!")

You can change the size of a button by setting the size prop to one of the following values: xs,sm,md, or lg.

rx.chakra.button_group(
    rx.chakra.button(
        "Example", bg="lightblue", color="black", size="sm"
    ),
    rx.chakra.button(
        "Example", bg="orange", color="white", size="md"
    ),
    rx.chakra.button(
        "Example", color_scheme="red", size="lg"
    ),
)

Customize the appearance of buttons by adjusting their color scheme through the color_scheme prop. You have the flexibility to choose from a range of color scales provided by your design system, such as whiteAlpha, blackAlpha, gray, red, blue, or even utilize your own custom color scale.

rx.chakra.button_group(
    rx.chakra.button(
        "White Alpha", color_scheme="whiteAlpha"
    ),
    rx.chakra.button(
        "Black Alpha", color_scheme="blackAlpha"
    ),
    rx.chakra.button("Gray", color_scheme="gray"),
    rx.chakra.button("Red", color_scheme="red"),
    rx.chakra.button("Orange", color_scheme="orange"),
    rx.chakra.button("Yellow", color_scheme="yellow"),
    rx.chakra.button("Green", color_scheme="green"),
    rx.chakra.button("Teal", color_scheme="teal"),
    rx.chakra.button("Blue", color_scheme="blue"),
    rx.chakra.button("Cyan", color_scheme="cyan"),
    rx.chakra.button("Purple", color_scheme="purple"),
    rx.chakra.button("Pink", color_scheme="pink"),
    rx.chakra.button("LinkedIn", color_scheme="linkedin"),
    rx.chakra.button("Facebook", color_scheme="facebook"),
    rx.chakra.button("Messenger", color_scheme="messenger"),
    rx.chakra.button("WhatsApp", color_scheme="whatsapp"),
    rx.chakra.button("Twitter", color_scheme="twitter"),
    rx.chakra.button("Telegram", color_scheme="telegram"),
)

You can customize the visual style of your buttons using the variant prop. Here are the available button variants:

  • ghost: A button with a transparent background and visible text.
  • outline: A button with no background color but with a border.
  • solid: The default button style with a solid background color.
  • link: A button that resembles a text link.
  • unstyled: A button with no specific styling.
rx.chakra.button_group(
    rx.chakra.button("Ghost Button", variant="ghost"),
    rx.chakra.button("Outline Button", variant="outline"),
    rx.chakra.button("Solid Button", variant="solid"),
    rx.chakra.button("Link Button", variant="link"),
    rx.chakra.button("Unstyled Button", variant="unstyled"),
)

Make buttons inactive by setting the is_disabled prop to True.

rx.chakra.button("Inactive button", is_disabled=True)

To indicate a loading state for a button after it's clicked, you can use the following properties:

  • is_loading: Set this property to True to display a loading spinner.
  • loading_text: Optionally, you can provide loading text to display alongside the spinner.
  • spinner_placement: You can specify the placement of the spinner element, which is 'start' by default.
rx.chakra.button(
    "Random button",
    is_loading=True,
    loading_text="Loading...",
    spinner_placement="start",
)

You can define what happens when a button is clicked using the on_click event argument. For example, to change a value in your application state when a button is clicked:

Random value

import reflex as rx


class ExampleButtonState(rx.State):
    text_value: str = "Random value"


def index():
    return rx.chakra.vstack(
        rx.chakra.text(ExampleButtonState.text_value),
        rx.chakra.button(
            "Change Value",
            on_click=ExampleButtonState.set_text_value(
                "Modified value"
            ),
        ),
    )


app = rx.chakra.App()
app.add_page(index)

In the code above, The value of text_value is changed through the set_text_value event handler upon clicking the button. Reflex provides a default setter event_handler for every base var which can be accessed by prefixing the base var with the set_ keyword.

Here’s another example that creates two buttons to increase and decrease a count value:

0

import reflex as rx


class ButtonState(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1


def index():
    return rx.chakra.hstack(
        rx.chakra.button(
            "Decrement",
            bg="#fef2f2",
            color="#b91c1c",
            border_radius="lg",
            on_click=ButtonState.decrement,
        ),
        rx.chakra.heading(
            ButtonState.count,
            font_size="2em",
            padding_x="0.5em",
        ),
        rx.chakra.button(
            "Increment",
            bg="#ecfdf5",
            color="#047857",
            border_radius="lg",
            on_click=ButtonState.increment,
        ),
    )


app = rx.chakra.App()
app.add_page(index)

In this example, we have a ButtonState state class that maintains a count base var. When the "Increment" button is clicked, it triggers the ButtonState.increment event handler, and when the "Decrement" button is clicked, it triggers the ButtonState.decrement event handler.

Buttons in Reflex can trigger special events and server-side actions, allowing you to create dynamic and interactive user experiences. You can bind these events to buttons using the on_click prop. For a comprehensive list of available special events and server-side actions, please refer to the Special Events Documentation for detailed information and usage examples.

In your Reflex application, you can group buttons effectively using the Stack component and the ButtonGroup component. Each of these options offers unique capabilities to help you structure and style your buttons.

The Stack component allows you to stack buttons both vertically and horizontally, providing a flexible layout for your button arrangements.

rx.chakra.stack(
    rx.chakra.button("Button 1"),
    rx.chakra.button("Button 2"),
    rx.chakra.button("Button 3"),
    direction="column",
)
rx.chakra.stack(
    rx.chakra.button("Button 1"),
    rx.chakra.button("Button 2"),
    rx.chakra.button("Button 3"),
    direction="row",
)

With the stack component, you can easily create both vertical and horizontal button arrangements.

The ButtonGroup component is designed specifically for grouping buttons. It allows you to:

  • Set the size and variant of all buttons within it.
  • Add spacing between the buttons.
  • Flush the buttons together by removing the border radius of their children as needed.
rx.chakra.button_group(
    rx.chakra.button("Option 1"),
    rx.chakra.button("Option 2"),
    rx.chakra.button("Option 3"),
    variant="outline",
    is_attached=True,
)

The ButtonGroup component stacks buttons horizontally, whereas the Stack component allows stacking buttons both vertically and horizontally.

The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation.

PropTypeDescriptionValues
icon_spacingint

The space between the button icon and label.

is_activebool

If true, the button will be styled in its active state.

is_disabledbool

If true, the button will be styled in its disabled state.

is_full_widthbool

If true, the button will take up the full width of its container.

is_loadingbool

If true, the button will show a spinner.

loading_textstr

The label to show in the button when isLoading is true If no text is passed, it only shows the spinner.

sizeLiteral

"lg" | "md" | "sm" | "xs"

variantLiteral

"ghost" | "outline" | "solid" | "link" | "unstyled"

color_schemeLiteral

Built in color scheme for ease of use. Options: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

spinner_placementLiteral

Position of the loading spinner. Options: "start" | "end"

type_str

The type of button.

namestr

Components that are not allowed as children. The name of the form field

Event Triggers

No component specific event triggers

A button with an icon.

PropTypeDescriptionValues
typestr

The type of button.

aria_labelstr

A label that describes the button

iconComponent

The icon to be used in the button.

is_activebool

If true, the button will be styled in its active state.

is_disabledbool

If true, the button will be disabled.

is_loadingbool

If true, the button will show a spinner.

is_roundbool

If true, the button will be perfectly round. Else, it'll be slightly round

spinnerstr

Replace the spinner component when isLoading is set to true

as_str

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

no_of_linesint

Truncate text after a specific number of lines. It will render an ellipsis when the text exceeds the width of the viewport or max_width prop.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting