Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

No component specific event triggers

← TabsCheckbox →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting