Button

Button adds disabled and loading state to a native <button>. The as prop can render another 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

Set loading-auto to 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. This allows a disabled button to trigger a tooltip.

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

API Reference

Props

Slots

Native Events

Button forwards native button events to the root element. Bind @click as usual. With loading-auto, a Promise returned by the handler keeps the button in its loading state until the Promise settles.

UI Options

Styling Hooks

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

Keyboard

Non-button roots receive role="button", keyboard activation, and tab behavior. Loading and disabled states block activation.