Actions

Button

A clickable action with variants, sizes, loading states, and icon slots built in.

Install

import { Button } from 'vael-ui'

Playground

import { Button } from 'vael-ui'

<Button :loading="false" :disabled="false" variant="primary" size="md" loader="overlay" :icon="false" :pill="false" :block="false" type="button" as="button" badgePlacement="top-start">Button</Button>

Props

Name	Type	Default	Description
`loading`	`boolean \| "auto" \| undefined`	`false`	`false` (default) / `true`: fully controlled. `'auto'`: opt into promise-based loading — `@click` returning a promise drives it, finishing only once the last overlapping promise resolves.
`disabled`	`boolean \| undefined`	`false`
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "link" \| "text" \| "danger"`	`"primary"`
`size`	`"md" \| "sm" \| "lg"`	`"md"`
`loader`	`"overlay" \| "inline"`	`"overlay"`	`overlay` (default): loader centered over fading content. `inline`: spinner slides in at start.
`icon`	`boolean \| undefined`	`false`	Square icon-only button; pair with an aria-label.
`pill`	`boolean \| undefined`	`false`	Fully rounded capsule/pill shape.
`block`	`boolean \| undefined`	`false`	Stretch to container's full inline size.
`type`	`"button" \| "submit" \| "reset"`	`"button"`
`as`	`string \| undefined`	`"button"`	Root tag (e.g. `as="a"` for a link styled as button).
`badgePlacement`	`"top-start" \| "top-end" \| "bottom-start" \| "bottom-end"`		Where the `#badge` slot sits (default `top-end`). Setting it also reserves the wrapper up front, so a `v-if`'d `#badge` keeps a stable DOM position before the first badge appears.
`ui`	`Partial<{ root: UiPartValue; leading: UiPartValue; trailing: UiPartValue; content: UiPartValue; label: UiPartValue; badge: UiPartValue; }> \| undefined`

Slots

Name	Type	Description
`default`	`{ loading: boolean; el: HTMLElement \| null; run: <T>(fn: () => T \| Promise<T>) => Promise<T>; }`
`loader`	`{ loading: boolean; el: HTMLElement \| null; }`	Custom loader visuals (placement and crossfade are library-owned).
`leading`	`any`	Icon before the label (1em box, optically aligned).
`trailing`	`any`	Icon after the label (1em box, optically aligned).
`badge`	`any`	Badge in library-positioned wrapper.

Events

No events.

Exposed

Name	Type	Description
`el`	`HTMLElement \| null`
`run`	`<T>(fn: () => T \| Promise<T>) => Promise<T>`