Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Forms

/

Button

Buttons are essential elements in your application's user interface that users can click to trigger events. This component uses Radix's button component.

rx.button("Click me")
rx.button(
    rx.icon(tag="heart"),
    "Like",
    color_scheme="red",
)

The disabled prop disables the button, by default it is False. A disabled button does not respond to user interactions such as click and cannot be focused.

rx.flex(
    rx.button("Enabled"),
    rx.button("Disabled", disabled=True),
    spacing="2",
)

The loading prop is used to indicate that the action triggered by the button is currently in progress. When set to True, the button displays a loading spinner, providing visual feedback to the user that the action is being processed. This also prevents multiple clicks while the button is in the loading state. By default, loading is set to False.

rx.flex(
    rx.button("Not loading"),
    rx.button("Loading", loading=True),
    spacing="2",
)

The on_click trigger is called when the button is clicked.

rx.button("Click me", on_click=rx.window_alert("Clicked!"))

0

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

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

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


def counter():
    return rx.flex(
        rx.button(
            "Decrement",
            color_scheme="red",
            on_click=CountState.decrement,
        ),
        rx.heading(CountState.count),
        rx.button(
            "Increment",
            color_scheme="grass",
            on_click=CountState.increment,
        ),
        spacing="3",
    )

Trigger an action or event, such as submitting a form or displaying a dialog.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

sizeLiteral

Button size "1" - "4"

variantLiteral

Variant of button: "solid" | "soft" | "outline" | "ghost"

color_schemeLiteral

Override theme color for button

high_contrastbool

Whether to render the button with higher contrast color against background

radiusLiteral

Override theme radius for button: "none" | "small" | "medium" | "large" | "full"

auto_focusUnion

Automatically focuses the button when the page loads

disabledbool

Disables the button

formUnion

Associates the button with a form (by id)

form_actionUnion

URL to send the form data to (for type="submit" buttons)

form_enc_typeUnion

How the form data should be encoded when submitting to the server (for type="submit" buttons)

form_methodUnion

HTTP method to use for sending form data (for type="submit" buttons)

form_no_validateUnion

Bypasses form validation when submitting (for type="submit" buttons)

form_targetUnion

Specifies where to display the response after submitting the form (for type="submit" buttons)

nameUnion

Name of the button, used when sending form data

typeUnion

Type of the button (submit, reset, or button)

valueUnion

Value of the button, used when sending form data

Event Triggers

See the full list of default event triggers
← TabsCheckbox →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting