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.

​
Button Type

Inside a Form, buttons default to type="submit", which triggers form submission on click. Set button_type="button" for actions that should not submit the form, like cancel or close buttons. 
from prefab_ui.components import Button, Form
from prefab_ui.actions.mcp import CallTool

with Form(on_submit=CallTool("save")):
    # ... inputs ...
    Button("Cancel", variant="outline", button_type="button")
    Button("Save")  # defaults to submit
The three standard HTML button types are available: "submit" (default in forms), "button" (no form behavior), and "reset" (clears the form).

​
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".
​
button_type
str | None
default:"None"
HTML button type: "submit" (default in forms), "button" (no form submit), or "reset". Use "button" for cancel/close actions inside a Form.
​
disabled
bool | str
default:"False"
Whether the button is non-interactive. Accepts a template expression like "{{ not $item.name }}" for conditional disabling.
​
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",
  "buttonType?": "submit | button | reset",
  "disabled?": "boolean | string",
  "onClick?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Button.