Intro

Gallery

Hosting

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self 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.

Basic Example

rx.button("Click me")

With Icon

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

Props

Disabled

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

Loading

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

Triggers

On Click

The on_click trigger is called when the button is clicked.

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

Real World Example

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

API Reference

Button

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

Prop	Type	Description
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`size`	Literal	Button size "1" - "4"
`variant`	Literal	Variant of button: "solid" \| "soft" \| "outline" \| "ghost"
`color_scheme`	Literal	Override theme color for button
`high_contrast`	bool	Whether to render the button with higher contrast color against background
`radius`	Literal	Override theme radius for button: "none" \| "small" \| "medium" \| "large" \| "full"
`auto_focus`	Union	Automatically focuses the button when the page loads
`disabled`	bool	Disables the button
`form`	Union	Associates the button with a form (by id)
`form_action`	Union	URL to send the form data to (for type="submit" buttons)
`form_enc_type`	Union	How the form data should be encoded when submitting to the server (for type="submit" buttons)
`form_method`	Union	HTTP method to use for sending form data (for type="submit" buttons)
`form_no_validate`	Union	Bypasses form validation when submitting (for type="submit" buttons)
`form_target`	Union	Specifies where to display the response after submitting the form (for type="submit" buttons)
`name`	Union	Name of the button, used when sending form data
`type`	Union	Type of the button (submit, reset, or button)
`value`	Union	Value of the button, used when sending form data