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 several variants: default, outline, ghost, destructive, secondary, and link.
html
<uButton variant="default">Default</uButton>
<uButton variant="outline">Outline</uButton>
<uButton variant="ghost">Ghost</uButton>
<uButton variant="destructive">Destructive</uButton>
<uButton variant="secondary">Secondary</uButton>
<uButton variant="link">Link</uButton>Colors
Choose from a wide range of color options: primary, success, warning, danger, accent, info, and white.
html
<uButton color="primary">Primary</uButton>
<uButton color="success">Success</uButton>
<uButton color="warning">Warning</uButton>
<uButton color="danger">Danger</uButton>
<uButton color="accent">Accent</uButton>
<uButton color="info">Info</uButton>
<uButton color="white">White</uButton>Sizes
Available in multiple sizes, including icon-specific sizes.
html
<uButton size="sm">Small</uButton>
<uButton size="default">Default</uButton>
<uButton size="lg">Large</uButton>
<uButton size="icon">Icon</uButton>
<uButton size="icon-sm">Icon Small</uButton>
<uButton size="icon-lg">Icon Large</uButton>States
Buttons can be disabled to prevent user interaction.
html
<uButton disabled>Disabled</uButton>API Reference
Inputs
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'outline' | 'ghost' | 'destructive' | 'secondary' | 'link' | 'default' | The visual style variant |
color | 'primary' | 'success' | 'warning' | 'danger' | 'accent' | 'info' | 'white' | 'primary' | The color scheme |
size | 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | 'default' | The button size |
disabled | boolean | false | Whether the button is disabled |
type | 'button' | 'submit' | 'reset' | 'button' | HTML button type |
ariaLabel | string | undefined | Accessibility label |