Skip to main content
Buttons trigger actions and communicate intent. The variant parameter signals what kind of action the button performs, while size controls its dimensions.

​
Basic Usage

The label can be passed as a positional argument or as a keyword (label="Save Changes").

​
Variants

Each variant communicates a different intent to the user:

​
Sizes

​
With Icons

Buttons accept an icon prop (any lucide icon name in kebab-case). The icon renders before the label text.

​
Icon Sizes

Square buttons optimized for single icons. Use icon with an icon-size variant for icon-only buttons.

​
Disabled State

​
Custom Styling

Every component accepts css_class for additional Tailwind CSS classes. When your classes target the same CSS property as a built-in style (like rounded-full vs the default rounded-md), the built-in class is automatically removed so your override wins cleanly:

​
API Reference

Button Parameters

​
label
str
required
Button text. Can be passed as a positional argument.
​
icon
str | None
default:"None"
Lucide icon name in kebab-case (e.g., "arrow-right", "trash-2"). Browse icons at lucide.dev/icons.
​
variant
str
default:"default"
Visual style: "default", "destructive", "outline", "secondary", "ghost", "link", "success", "warning", "info".
​
size
str
default:"default"
Button dimensions: "default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg".
​
disabled
bool
default:"False"
Whether the button is non-interactive.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Button
{
  "type": "Button",
  "label": "string (required)",
  "icon?": "string",
  "variant?": "default | destructive | outline | secondary | ghost | link | success | warning | info",
  "size?": "default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg",
  "disabled?": false,
  "onClick?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Button.