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.
Event Triggers
See the full list of default event triggersDid you find this useful?
