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
Variants
Default
Destructive
Outline
Secondary
Ghost
Link
Sizes
Button Sizes
Icon Button
With Icons
Button With Icon
Icon On Right
States
Disabled State
Loading State
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;
}