Button
Triggers actions. Supports four variants, three sizes, loading and disabled states.
Appearance
Primary
The default button. Use for the single primary action on a surface — save, submit, create.
<Button>Save changes</Button>Secondary
Use for secondary actions alongside a primary button — cancel, back, export.
<Button variant="secondary">Cancel</Button>Ghost
Use for tertiary or low-priority actions — more options, collapse, toolbar controls.
<Button variant="ghost">More options</Button>Danger
Use for destructive, irreversible actions — delete, remove, revoke. Always pair with a confirmation step.
<Button variant="danger">Delete record</Button>All variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>Sizes
Small
Use in dense UI — table toolbars, filter rows, inline actions where vertical space is constrained.
<Button size="sm">Small</Button>Medium
The default size. Use in forms, modals, and page-level actions.
<Button size="md">Medium</Button>Large
Use for prominent page-level CTAs or marketing-style actions.
<Button size="lg">Large</Button>States
Loading
When loading is true, a spinner replaces the icon slot and the button is automatically disabled. Use for async actions where you need to prevent re-submission.
<Button :loading="saving" @click="save">
Save changes
</Button>Disabled
<Button :disabled="!form.isValid">Submit</Button>Common patterns
Form actions
A primary and secondary button pair is the standard form footer layout.
<template #footer>
<Button variant="secondary" @click="$emit('close')">Cancel</Button>
<Button :loading="saving" type="submit">Save changes</Button>
</template>Full width
Pass class="w-full" — extra classes are appended safely via extraClass computed.
<Button class="w-full">Continue</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | Visual style |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
loading | boolean | false | Show spinner and disable the button |
disabled | boolean | false | Disable the button |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type |
Slots
| Slot | Description |
|---|---|
default | Button label or content |