Alert Dialog
<script setup lang="ts">
import {
AAlertDialogAction,
AAlertDialogCancel,
AAlertDialogContent,
AAlertDialogDescription,
AAlertDialogOverlay,
AAlertDialogPortal,
AAlertDialogRoot,
AAlertDialogTitle,
AAlertDialogTrigger,
} from 'akar';
function handleAction() {
// eslint-disable-next-line no-alert
alert('clicked action button!');
}
</script>
<template>
<AAlertDialogRoot>
<AAlertDialogTrigger
class="text-sm color-primary font-500 px-2.5 py-1.5 rounded-md inline-flex gap-1.5 ring ring-primary/50 ring-inset shadow-md transition-colors-280 items-center focus:outline-none active:bg-primary/10 hover:bg-primary/10 focus-visible:(ring-2 ring-primary)"
>
Delete account
</AAlertDialogTrigger>
<AAlertDialogPortal>
<AAlertDialogOverlay class="bg-background-elevated/75 inset-0 fixed data-[state=closed]:(animate-out fade-out-0) data-[state=open]:(animate-in fade-in-0)" />
<AAlertDialogContent
class="rounded-lg bg-background grid grid-rows-[min-content_1fr_min-content] max-h-[calc(100dvh-2rem)] max-w-lg w-[calc(100vw-2rem)] ring ring-ring shadow-lg left-1/2 top-1/2 fixed overflow-hidden divide-divide divide-y focus:outline-none sm:max-h-[calc(100dvh-4rem)] -translate-x-1/2 -translate-y-1/2 data-[state=closed]:(animate-out fade-out-0 zoom-out-95) data-[state=open]:(animate-in fade-in-0 zoom-in-95)"
>
<AAlertDialogTitle class="color-text-highlighted font-semibold p-4 flex gap-1.5 min-h-16 items-center sm:px-6">
Are you absolutely sure?
</AAlertDialogTitle>
<AAlertDialogDescription class="text-sm color-text-muted mt-1 p-4 flex-1 overflow-y-auto sm:p-6">
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
</AAlertDialogDescription>
<div class="p-4 flex gap-1.5 gap-4 items-center justify-end sm:px-6">
<AAlertDialogCancel
class="text-sm color-text font-500 px-2.5 py-1.5 rounded-md bg-background-elevated inline-flex gap-1.5 shadow-md transition-colors-280 items-center focus:outline-none active:bg-background-accented/75 focus-visible:bg-background-accented/75 hover:bg-background-accented/75"
>
Cancel
</AAlertDialogCancel>
<AAlertDialogAction
class="text-sm color-text-inverted font-500 px-2.5 py-1.5 rounded-md bg-error inline-flex gap-1.5 shadow-md transition-colors-280 items-center focus-visible:outline-2 focus-visible:outline-error focus-visible:outline-offset-2 active:bg-error/75 hover:bg-error/75"
@click="handleAction"
>
Yes, delete account
</AAlertDialogAction>
</div>
</AAlertDialogContent>
</AAlertDialogPortal>
</AAlertDialogRoot>
</template>
Features
- Focus is automatically trapped.
- Can be controlled or uncontrolled.
- Manages screen reader announcements with
TitleandDescriptioncomponents. - Esc closes the component automatically.
Anatomy
Import all parts and piece them together.
<script setup lang="ts">
import {
AAlertDialogAction,
AAlertDialogCancel,
AAlertDialogContent,
AAlertDialogDescription,
AAlertDialogOverlay,
AAlertDialogPortal,
AAlertDialogRoot,
AAlertDialogTitle,
AAlertDialogTrigger,
} from 'akar';
</script>
<template>
<AAlertDialogRoot>
<AAlertDialogTrigger />
<AAlertDialogPortal>
<AAlertDialogOverlay />
<AAlertDialogContent>
<AAlertDialogTitle />
<AAlertDialogDescription />
<AAlertDialogCancel />
<AAlertDialogAction />
</AAlertDialogContent>
</AAlertDialogPortal>
</AAlertDialogRoot>
</template>
API Reference
Root
Contains all the parts of an alert dialog.
Trigger
A button that opens the dialog.
Data Attributes
| Attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Portal
When used, portals your overlay and content parts into the body.
Overlay
A layer that covers the inert portion of the view when the dialog is open.
Data Attributes
| Attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Content
Contains content to be rendered when the dialog is open.
Data Attributes
| Attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Cancel
A button that closes the dialog. This button should be distinguished visually from AAlertDialogAction buttons.
Action
A button that closes the dialog. These buttons should be distinguished visually from the AAlertDialogCancel button.
Title
An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AAlertDialogContent and exclude this component.
Description
An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AAlertDialogContent and exclude this component.
Examples
Close after asynchronous form submission
Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.
<script setup>
import {
AAlertDialogAction,
AAlertDialogCancel,
AAlertDialogContent,
AAlertDialogDescription,
AAlertDialogOverlay,
AAlertDialogPortal,
AAlertDialogRoot,
AAlertDialogTitle,
AAlertDialogTrigger,
} from 'akar';
const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
const open = ref(false);
</script>
<template>
<AAlertDialogRoot v-model:open="open">
<AAlertDialogTrigger>Open</AAlertDialogTrigger>
<AAlertDialogPortal>
<AAlertDialogOverlay />
<AAlertDialogContent>
<form
@submit.prevent="
(event) => {
wait().then(() => open = false);
}
"
>
<!-- some inputs -->
<button type="submit">
Submit
</button>
</form>
</AAlertDialogContent>
</AAlertDialogPortal>
</AAlertDialogRoot>
</template>
Custom portal container
Customise the element that your alert dialog portals into.
<script setup>
import { ref } from 'vue';
const container = ref(null);
</script>
<template>
<div>
<AAlertDialogRoot>
<AAlertDialogTrigger />
<AAlertDialogPortal :to="container">
<AAlertDialogOverlay />
<AAlertDialogContent>...</AAlertDialogContent>
</AAlertDialogPortal>
</AAlertDialogRoot>
<div ref="container" />
</div>
</template>
Accessibility
Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.
Keyboard Interactions
| Key | Description |
|---|---|
Space | Opens/closes the dialog. |
Enter | Opens/closes the dialog. |
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Esc | Closes the dialog and moves focus to |