Button Component
The Button component is a versatile, accessible button with support for multiple variants, colors, sizes, and states.
Basic Usage
html
<uButton>Default Button</uButton>Variants
The button component supports three variants: default, outline, and ghost.
html
<uButton variant="default">Default</uButton>
<uButton variant="outline">Outline</uButton>
<uButton variant="ghost">Ghost</uButton>Colors
Choose from primary, secondary, success, warning, and danger color options.
html
<uButton color="primary">Primary</uButton>
<uButton color="secondary">Secondary</uButton>
<uButton color="success">Success</uButton>
<uButton color="warning">Warning</uButton>
<uButton color="danger">Danger</uButton>Sizes
Available in small, medium, and large sizes.
html
<uButton size="sm">Small</uButton>
<uButton size="md">Medium</uButton>
<uButton size="lg">Large</uButton>States
Buttons can be disabled or show a loading state.
html
<uButton disabled>Disabled</uButton>
<uButton loading>Loading</uButton>API Reference
Inputs
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'outline' | 'ghost' | 'default' | The visual style variant |
color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'primary' | The color scheme |
size | 'sm' | 'md' | 'lg' | 'md' | The button size |
disabled | boolean | false | Whether the button is disabled |
loading | boolean | false | Whether to show loading state |