Button

An accessible button element with built-in support for disabled, loading, and async click states. Renders as <button> by default but can be any element or component.

Anatomy

• #default: Button label or content.
• #loading: Content shown while loading. Defaults to the built-in spinner.

Usage

<script setup lang="ts">
import { Button } from "akaza-ui";
</script>

<template>
  <Button>Click me</Button>
</template>

Examples

Disabled state

Use disabled for actions that cannot currently run.

<template>
  <Button disabled>Unavailable</Button>
</template>

Async loading

Use loading-auto to automatically show a spinner while the @click handler's Promise is pending.

<script setup lang="ts">
async function save() {
  await api.save();
}
</script>

<template>
  <Button loading-auto @click="save">Save</Button>
</template>

Custom loading content

Use #loading when the default spinner does not match your UI.

<template>
  <Button :loading="isSaving">
    Save
    <template #loading>
      <span>Saving…</span>
    </template>
  </Button>
</template>

Render as a link

Use as to render a different root while keeping Akaza button state hooks.

<template>
  <Button as="a" href="/docs">Read the docs</Button>
</template>

Focusable when disabled

Keeps the button in the tab order while disabled — useful for showing tooltips on disabled buttons.

<template>
  <Button disabled focusable-when-disabled>Restricted</Button>
</template>

API Reference

Props

Slots

Native Events

Button forwards native button events to the root element. Use @click directly; when loading-auto is set and the handler returns a Promise, the button enters loading state until it settles.

UI Options

Styling Hooks

Plain class also applies to the root button. Use ui.root when styling root together with spinner or loadingText.