components:

- rx.radix.button

Button: |

lambda **props: rx.radix.themes.button("Basic Button", **props)

import reflex as rx

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

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

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

button.md 1.5 KB Түүх Анхны өгөгдөл