Import
from reflex_ui import button
Description
A custom button component with variants, sizes, and loading state support.
Basic Usage
button("Click me")
button("Primary", variant="primary", size="md")
button("Loading", loading=True)
Props
variant
Literal['primary', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'dark'] | Var[...]
default:"primary"
Button variant that controls the visual style.
size
Literal['xs', 'sm', 'md', 'lg', 'xl', 'icon-xs', 'icon-sm', 'icon-md', 'icon-lg', 'icon-xl'] | Var[...]
default:"md"
Button size. Use icon-* variants for icon-only buttons.
loading
Var[bool] | bool
default:"False"
Whether the button is in a loading state. Shows a spinner icon when true.
disabled
Var[bool] | bool
default:"False"
Whether the button is disabled.
type
Literal['button', 'reset', 'submit'] | Var[...]
default:"button"
The type attribute of the button element.
Whether the button should automatically receive focus.
Associates the button with a form element.
Name of the button for form submission.
value
Var[float | int | str] | float | int | str
Value of the button for form submission.
Variants
Available Variants
primary - Primary action button (default)destructive - Destructive/danger action buttonoutline - Outlined buttonsecondary - Secondary action buttonghost - Minimal ghost buttonlink - Link-styled buttondark - Dark background button
Variant Classes
BUTTON_VARIANTS = {
"variant": {
"primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10",
"destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast",
"outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12",
"secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5",
"ghost": "hover:bg-secondary-3 text-secondary-11",
"link": "text-secondary-12 underline-offset-4 hover:underline",
"dark": "bg-secondary-12 text-secondary-1 hover:bg-secondary-12/80",
}
}
Sizes
Available Sizes
xs - Extra small (h-7)sm - Small (h-8)md - Medium (h-9, default)lg - Large (h-10)xl - Extra large (h-12)icon-xs through icon-xl - Square icon buttons
Size Classes
BUTTON_VARIANTS = {
"size": {
"xs": "px-1.5 h-7 rounded-ui-xs gap-1.5",
"sm": "px-2 h-8 rounded-ui-sm gap-2",
"md": "px-2.5 h-9 rounded-ui-md gap-2",
"lg": "px-3 h-10 rounded-ui-lg gap-2.5",
"xl": "px-3.5 h-12 rounded-ui-xl gap-3",
"icon-xs": "size-7 rounded-ui-xs",
"icon-sm": "size-8 rounded-ui-sm",
"icon-md": "size-9 rounded-ui-md",
"icon-lg": "size-10 rounded-ui-lg",
"icon-xl": "size-12 rounded-ui-xl",
}
}
Event Handlers
on_click
EventType[()] | EventType[PointerEventInfo]
Fired when the button is clicked.
Fired when the button loses focus.
Fired when the button receives focus.
Fired when the mouse enters the button.
Fired when the mouse leaves the button.
Styling
Default Class Name
DEFAULT_CLASS_NAME = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:border disabled:border-secondary-4/80 disabled:bg-secondary-3 disabled:text-secondary-8 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 cursor-pointer box-border"
Custom Styling
button("Custom", class_name="custom-class")
Method Signature
@classmethod
def create(
cls,
*children,
variant: Literal["dark", "destructive", "ghost", "link", "outline", "primary", "secondary"] | Var[...] | None = None,
size: Literal["icon-lg", "icon-md", "icon-sm", "icon-xl", "icon-xs", "lg", "md", "sm", "xl", "xs"] | Var[...] | None = None,
loading: Var[bool] | bool | None = None,
disabled: Var[bool] | bool | None = None,
type: Literal["button", "reset", "submit"] | Var[...] | None = None,
**props
) -> Button
Return Type
Button - Returns a Button component instance that extends BaseButton.