The Button component provides a flexible, accessible button with support for different visual variants, sizes, icons, and loading states.
Basic Usage
import reflex_ui as ui
ui.button("Click me")
Variants
Buttons come in 7 different visual styles:
ui.button("Primary", variant="primary") # Default
ui.button("Destructive", variant="destructive")
ui.button("Outline", variant="outline")
ui.button("Secondary", variant="secondary")
ui.button("Ghost", variant="ghost")
ui.button("Link", variant="link")
ui.button("Dark", variant="dark")
variant
Literal['primary', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'dark']
default:"primary"
The visual style variant of the button
Sizes
Buttons support 5 standard sizes and 5 icon-only sizes:
ui.button("Extra Small", size="xs")
ui.button("Small", size="sm")
ui.button("Medium", size="md") # Default
ui.button("Large", size="lg")
ui.button("Extra Large", size="xl")
# Icon-only sizes
ui.button(ui.icon("SmileIcon"), size="icon-xs")
ui.button(ui.icon("SmileIcon"), size="icon-sm")
ui.button(ui.icon("SmileIcon"), size="icon-md")
ui.button(ui.icon("SmileIcon"), size="icon-lg")
ui.button(ui.icon("SmileIcon"), size="icon-xl")
size
Literal['xs', 'sm', 'md', 'lg', 'xl', 'icon-xs', 'icon-sm', 'icon-md', 'icon-lg', 'icon-xl']
default:"md"
The size of the button. Icon sizes remove padding for icon-only buttons.
Loading State
Buttons can display a loading spinner:
ui.button("Loading...", loading=True)
ui.button("Submit", loading=State.is_submitting)
loading
bool | Var[bool]
default:"False"
Shows a spinner and disables the button when True
With Icons
ui.button(
ui.icon("SmileIcon"),
"Click me",
variant="primary"
)
Event Handlers
ui.button(
"Click me",
on_click=rx.toast.success("Clicked!", position="top-center")
)
Props Reference
Disables button interaction
Additional CSS classes for styling
type
Literal['button', 'submit', 'reset']
default:"button"
HTML button type attribute
Implementation Details
From source code at reflex_ui/components/base/button.py:46:
- Extends Reflex’s base
Button element
- Automatically inserts spinner icon when loading
- Validates variant and size at creation time
- Supports all standard HTML button attributes