Button
Buttons are essential elements in your application's user interface that users can click to trigger events.
Basic Example
The on_click trigger is called when the button is clicked.
0
ExpandCollapse
Loading and Disabled
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.
The disabled prop also prevents the button from being but does not provide a spinner.
API Reference
rx.button
Trigger an action or event, such as submitting a form or displaying a dialog.
loadingdisabledsizevariantcolor_schemehigh_contrastradiusProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
loading | bool | If set, show an rx.spinner instead of the component children. |
auto_focus | bool | Automatically focuses the button when the page loads. |
disabled | bool | Disables the button. |
form | str | Associates the button with a form (by id). |
form_action | str | URL to send the form data to (for type="submit" buttons). |
form_enc_type | str | How the form data should be encoded when submitting to the server (for type="submit" buttons). |
form_method | str | HTTP method to use for sending form data (for type="submit" buttons). |
form_no_validate | bool | Bypasses form validation when submitting (for type="submit" buttons). |
form_target | str | Specifies where to display the response after submitting the form (for type="submit" buttons). |
name | str | Name of the button, used when sending form data. |
type | "submit""reset""button" | Type of the button (submit, reset, or button). |
value | Union[str, int, float] | Value of the button, used when sending form data. |
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
size | "1""2""3""4" | Button size "1" - "4". |
variant | "classic""solid""soft""surface""outline""ghost" | Variant of button: "solid" | "soft" | "outline" | "ghost". |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Override theme color for button. |
high_contrast | bool | Whether to render the button with higher contrast color against background. |
radius | "none""small""medium""large""full" | Override theme radius for button: "none" | "small" | "medium" | "large" | "full". |