Components

Alert Dialog

A modal dialog that interrupts the user and requires a response.

Alert Dialog blocks page interaction, traps focus, and uses role="alertdialog".

Use this for destructive or irreversible actions. For non-critical dialogs, use Dialog instead.

Anatomy

#trigger: Element that opens the dialog.
#header: Area containing the title and optional close control.
#title: Dialog accessible title.
#description: Supplementary description text.
#body: Main content area.
#footer: Action buttons for confirm and cancel flows.

Usage

Examples

Custom header

Use header, body, and footer slots when the default alert layout needs custom controls.

<template>
  <AlertDialog>
    <template #trigger="{ toggle }">
      <button @click="toggle">Open</button>
    </template>

    <template #header="{ close, titleId }">
      <h2 :id="titleId">Are you sure?</h2>
      <button aria-label="Close" @click="close">✕</button>
    </template>

    <template #body="{ descriptionId }">
      <p :id="descriptionId">This cannot be undone.</p>
    </template>

    <template #footer="{ close }">
      <button @click="close">Cancel</button>
      <button @click="close">Confirm</button>
    </template>
  </AlertDialog>
</template>

Programmatic control

Expose the component ref to open/close from outside.

<script setup lang="ts">
import { ref } from "vue";
import { AlertDialog } from "akaza-ui";

const dialog = ref();
</script>

<template>
  <AlertDialog ref="dialog">
    <template #footer="{ close }">
      <button @click="close">Dismiss</button>
    </template>
  </AlertDialog>

  <button @click="dialog?.open()">Open from outside</button>
</template>

API Reference

Props

Prop	Type	Default	Description
`title`	`string`	—	Convenience title prop. Slot `#title` takes priority.
`ariaLabel`	`string`	—	Fallback accessible name when no title is rendered.
`description`	`string`	—	Convenience description prop. Slot `#description` takes priority.
`teleport`	`string \| false`	`"body"`	Teleport target for the dialog.
`transition`	`string \| false`	`"akaza-alert-dialog"`	Named Vue transition to apply.
`duration`	`number`	`150`	Transition duration in ms.
`as`	`string`	`"div"`	Root element tag.
`ui`	`AlertDialogUi`	—	CSS class overrides.

Slots

Slot	Scoped props	Description
`trigger`	`{ isOpen, open, close, toggle }`	Element that opens the dialog.
`header`	`{ close, titleId }`	Header region.
`title`	—	Dialog title. Defaults to the `title` prop.
`description`	—	Description text. Defaults to the `description` prop.
`body`	`{ close, descriptionId }`	Main content area.
`footer`	`{ close }`	Action buttons region.

Emits

Event	Payload	Description
`open-change`	`[open: boolean, details]`	Fired when the open state changes.

Exposed methods

Method	Signature	Description
`open`	`(reason?, event?) => void`	Opens the dialog.
`close`	`(reason?, event?) => void`	Closes the dialog.
`toggle`	`(reason?, event?) => void`	Toggles the dialog.
`titleId`	`string`	Auto-generated id for the title element.
`descriptionId`	`string`	Auto-generated id for the description element.

UI Options

Key	Description
`overlay`	The backdrop overlay element.
`content`	The dialog panel element.
`header`	The header region.
`title`	The title element.
`description`	The description element.
`body`	The body region.
`footer`	The footer region.

Styling Hooks

UI key	CSS class	Data attrs
`overlay`	`akaza-alert-dialog-overlay`	`data-akaza-state`
`content`	`akaza-alert-dialog-content`	`data-akaza-state`
`header`	`akaza-alert-dialog-header`	—
`title`	`akaza-alert-dialog-title`	—
`description`	`akaza-alert-dialog-description`	—
`body`	`akaza-alert-dialog-body`	—
`footer`	`akaza-alert-dialog-footer`	—

AlertDialog renders trigger slot content plus teleported overlay/content. Use ui keys instead of relying on plain class fallthrough.

Keyboard

Key	Behavior
`Tab` / `Shift + Tab`	Cycles through focusable controls inside open alert dialog.
`Escape`	Does not close the alert dialog. The user must choose an action.

Opening moves focus inside. Closing restores focus to previous element. Backdrop activation does not dismiss it.

Accordion

A set of collapsible sections with headings.

Avatar

An image element with a fallback for when the image fails to load.