ObjectUIComponentsForm
Button
Trigger actions and events with customizable button styles
The Button component triggers actions when clicked. It supports multiple variants, sizes, and states.
Basic Usage
Simple Button
{
"type": "button",
"label": "Click Me"
}Variants
Default
{
"type": "button",
"label": "Default",
"variant": "default"
}Destructive
{
"type": "button",
"label": "Destructive",
"variant": "destructive"
}Outline
{
"type": "button",
"label": "Outline",
"variant": "outline"
}Secondary
{
"type": "button",
"label": "Secondary",
"variant": "secondary"
}Ghost
{
"type": "button",
"label": "Ghost",
"variant": "ghost"
}Link
{
"type": "button",
"label": "Link",
"variant": "link"
}Sizes
Button Sizes
{
"type": "flex",
"gap": 2,
"align": "center",
"children": [
{
"type": "button",
"label": "Small",
"size": "sm"
},
{
"type": "button",
"label": "Default",
"size": "default"
},
{
"type": "button",
"label": "Large",
"size": "lg"
}
]
}Icon Button
{
"type": "flex",
"gap": 2,
"align": "center",
"children": [
{
"type": "button",
"label": "🎯",
"size": "icon"
}
]
}With Icons
Button with Icon
{
"type": "button",
"label": "Send Email",
"icon": "mail",
"variant": "default"
}Icon on Right
{
"type": "button",
"label": "Download",
"icon": "download",
"iconPosition": "right",
"variant": "outline"
}States
Disabled State
{
"type": "button",
"label": "Disabled",
"disabled": true
}Loading State
{
"type": "button",
"label": "Loading",
"loading": true
}Schema
interface ButtonSchema {
type: 'button';
label: string; // Button text
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
size?: 'sm' | 'default' | 'lg' | 'icon';
// Icons
icon?: string; // Lucide icon name
iconPosition?: 'left' | 'right'; // Icon placement
// States
disabled?: boolean;
loading?: boolean;
// Actions
onClick?: string | ActionConfig; // Action on click
href?: string; // Link URL (renders as link)
// Styling
className?: string;
fullWidth?: boolean;
}Examples
Action Buttons
Common Action Buttons
{
"type": "flex",
"gap": 3,
"children": [
{
"type": "button",
"label": "Save",
"variant": "default",
"icon": "save"
},
{
"type": "button",
"label": "Cancel",
"variant": "outline"
},
{
"type": "button",
"label": "Delete",
"variant": "destructive",
"icon": "trash"
}
]
}Full Width
Full Width Button
{
"type": "button",
"label": "Full Width Button",
"fullWidth": true,
"variant": "default"
}