<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>
Title and Description components.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>
Contains all the parts of an alert dialog.
A button that opens the dialog.
| Attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
When used, portals your overlay and content parts into the body.
A layer that covers the inert portion of the view when the dialog is open.
| Attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
Contains content to be rendered when the dialog is open.
| Attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
A button that closes the dialog. This button should be distinguished visually from AAlertDialogAction buttons.
A button that closes the dialog. These buttons should be distinguished visually from the AAlertDialogCancel button.
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.
An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AAlertDialogContent and exclude this component.
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>
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>
Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.
| 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 |