Button
Buttons trigger an action. Three variants — primary, secondary, and ghost — with three sizes.
Basic Usage
vue
<AButton variant="primary">Primary</AButton>
<AButton variant="secondary">Secondary</AButton>
<AButton variant="ghost">Ghost</AButton>Size
vue
<AButton size="sm">Small</AButton>
<AButton size="md">Medium</AButton>
<AButton size="lg">Large</AButton>Disabled & Loading
vue
<AButton disabled>Disabled</AButton>
<AButton loading>Loading</AButton>API
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'secondary' | Visual variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
disabled | boolean | false | Disabled state |
loading | boolean | false | Loading state, shows spinner |
type | 'button' | 'submit' | 'reset' | 'button' | Native type |
Emits
| Name | Parameters | Description |
|---|---|---|
click | MouseEvent | Triggered on click |
Slots
| Name | Description |
|---|---|
| default | Button text and icons |
Interaction
- Hover floats up
1pxwith deeper shadow - Active
scale(0.96)with spring bounce - Color transitions use
--ease-smooth, scaling uses--ease-spring