Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
<script lang="ts">
import { AlertDialog } from 'radix-svelte';
import type { ResolvedProps } from 'radix-svelte/internal/helpers';
// These are internal icons, but they're not exported from the package.
// Use your own icons instead.
let rootOpen: boolean;
let portalContainer: HTMLElement | string;
let contentOpenAutoFocus: boolean;
let contentCloseAutoFocus: boolean = true;
</script>
<AlertDialog.Root bind:open={rootOpen}>
<AlertDialog.Trigger
class="inline-flex items-center justify-center rounded-md bg-white px-4 py-2
font-medium leading-none text-vermilion-800 shadow-lg hover:opacity-75
focus:outline-none focus:ring focus:ring-black"
>
Delete account
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay class="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow" />
<AlertDialog.Content
class="fixed left-[50%] top-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%]
translate-y-[-50%] rounded-md bg-white p-[25px] shadow-lg
focus:outline-none data-[state=open]:animate-contentShow"
>
<AlertDialog.Title class="m-0 text-lg font-medium text-black"
>Are you absolutely sure?</AlertDialog.Title
>
<AlertDialog.Description class="mb-5 mt-[10px] leading-normal text-zinc-600">
This action cannot be undone. This will permanently delete your account and remove your data
from our servers.
</AlertDialog.Description>
<div class="mt-[25px] flex justify-end gap-4">
<AlertDialog.Cancel
class=" inline-flex h-9 items-center justify-center rounded-md bg-zinc-100
px-4 font-medium leading-none text-zinc-600 focus:outline-none focus:ring-2 focus:ring-black"
>
Cancel
</AlertDialog.Cancel>
<AlertDialog.Action
class="inline-flex h-9 items-center justify-center rounded-md bg-red-100
px-4 font-medium leading-none text-red-600 focus:outline-none focus:ring-2 focus:ring-black"
>
Yes, delete account
</AlertDialog.Action>
</div>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
API Reference
Root
Contains all the parts of an alert dialog.
openTrigger
A button that opens the dialog.
No Props
Data AttributeValue Data Attributes
data-statePortal
When used, portals your overlay and content parts into the body.
containerOverlay
A layer that covers the inert portion of the view when the dialog is open.
No Props
Data AttributeValue Data Attributes
data-stateContent
Contains content to be rendered when the dialog is open.
openAutoFocuscloseAutoFocusEventPayload Events
escapeKeyDownData AttributeValue Data Attributes
data-stateCancel
A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.
No props, events or data attributes are explicitly required.
Action
A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.
No props, events or data attributes are explicitly required.
Title
An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude this component.
No props, events or data attributes are explicitly required.
Description
An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude this component.
No props, events or data attributes are explicitly required.