Button Props

Name	Type	Default	Description
label	string	required	Names the action and becomes visible text when no default slot is present.
variant	'primary' | 'secondary' | 'ghost' | 'destructive'	'secondary'	Visual hierarchy and semantic variant.
size	'sm' | 'md' | 'lg'	'md'	Button size.
elevation	'none' | 'low' | 'med' | 'high'	'none'	Resting shadow depth for a standalone floating button; ButtonGroup owns it inside a group.
type	'button' | 'submit' | 'reset'	'button'	Native button type.
name	string	—	Form submission name.
value	string | number | readonly string[]	—	Form submission value.
form	string	—	ID of the associated form.
isDisabled	boolean	false	Disables interaction. A tooltip switches this to aria-disabled so focus remains available.
isLoading	boolean	false	Shows loading state, sets aria-busy, and disables non-interruptible activation.
isInterruptible	boolean	false	Allows clickAction to run again while earlier work is pending.
clickAction	(event: MouseEvent) => void | Promise<void>	—	Action function that automatically drives pending state.
isIconOnly	boolean	false	Shows only the icon slot and uses label to name the button.
width	number | string	—	Button width. Numbers become pixels; CSS strings are used as supplied.
loadingLabel	string	'Loading'	Localized text used by the spinner and live region.
tooltip	string	—	Supplementary hint shown on hover and keyboard focus.
href	string	—	Renders the enabled root as a link when present.
as	string | Component	'a'	Custom Vue link component for href mode. It receives both href and to.
target	string	—	Link browsing context.
rel	string	—	Link relationship attribute.

Async actions

• @click runs before clickAction.
• If @click calls event.preventDefault(), the component skips clickAction.
• If clickAction returns a Promise, the component enters the loading state.
• When the Promise fulfills or rejects, the component clears the loading state.
• The application must catch errors inside clickAction.

Repeated activation

• If isInterruptible is false, loading blocks another activation.
• If isInterruptible is true, loading permits another activation.
• Repeated activation runs multiple actions concurrently.
• The component does not cancel earlier Promises.

To cancel an earlier network request, call AbortController.abort() in the application.

Button Slots

Name	Description
default	Optional visible-content override. label remains the stable accessible name.
icon	Decorative icon before the label.
end	Short trailing decoration such as a badge or icon. Ignored in icon-only mode.

Button Events

Name	Payload	Description
click	MouseEvent	Cancellable Vue component event. It is not emitted while disabled, non-interruptible loading, or deduplicated.

Template ref

Button exposes element. Its type is HTMLButtonElement | HTMLAnchorElement | HTMLElement | null.

Native attributes

The root element receives:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.
• Native event listeners.