/

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

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.

Prop	Type \| Values	Default	Interactive
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`	false
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`	false
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`	false
`tab_index`	`int`	`-`
`title`	`str`	`-`
`loading`	`bool`	`-`	false
`auto_focus`	`bool`	`-`	false
`disabled`	`bool`	`-`	false
`form`	`str`	`-`
`form_action`	`str`	`-`
`form_enc_type`	`str`	`-`
`form_method`	`str`	`-`
`form_no_validate`	`bool`	`-`	false
`form_target`	`str`	`-`
`name`	`str`	`-`
`type`	`"submit" \| "reset" \| ...`	`-`
`value`	`Union[str, int, float]`	`-`
`as_child`	`bool`	`-`
`size`	`"1" \| "2" \| ...`	`-`
`variant`	`"classic" \| "solid" \| ...`	`-`
`color_scheme`	`"tomato" \| "red" \| ...`	`-`
`high_contrast`	`bool`	`-`	false
`radius`	`"none" \| "small" \| ...`	`-`

Event Triggers

See the full list of default event triggers

Button

Basic Example

0

Loading and Disabled

API Reference

rx.button

Event Triggers