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:

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:

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,
)