Alert Dialog

Interrupts the user to confirm an important or destructive action before it happens.

Stable

Web

iOS

Android

@advui/core

Source

Destructive confirmation

Preview

Code

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { AlertDialog, Button } from '@advui/core'

<AlertDialog>
  <AlertDialog.Trigger asChild>
    <Button variant="destructive">Delete project</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete “Atlas”?</AlertDialog.Title>
      <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel asChild>
        <Button variant="outline">Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action asChild>
        <Button variant="destructive" onPress={deleteProject}>Delete</Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog>

Examples

Waits for the action

Stays open and busy until the request finishes.

Preview

Code

API reference

AlertDialog

Prop	Type	Default	Description
`open`	`boolean`	—	Open state, when you control it.
`defaultOpen`	`boolean`	`false`	Open at first, when the dialog manages its state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the dialog opens or closes.

AlertDialog.Trigger

Opens the dialog. Use `asChild` to render your Button.

AlertDialog.Content

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'sm'`	Max width.

AlertDialog.Title

Prop	Type	Default	Description
`children` required	`ReactNode`	—	The question, e.g. “Delete this project?”. Names the dialog.

AlertDialog.Description

Prop	Type	Default	Description
`children` required	`ReactNode`	—	The consequences. Announced with the title.

AlertDialog.Cancel

Closes without acting. Receives focus when the dialog opens.

Prop	Type	Default	Description
`asChild`	`boolean`	—	Wrap your own Button.

AlertDialog.Action

Confirms and closes. For work that takes time, use a plain Button and close when it finishes.

Prop	Type	Default	Description
`asChild`	`boolean`	—	Wrap your own Button.

AlertDialog.Header

Stacks the title and description.

AlertDialog.Footer

A row for Cancel and the Action.

Accessibility

role="alertdialog" with aria-modal, named by the Title and described by the Description, so screen readers announce the whole question.
Focus starts on Cancel, the safe choice, is trapped while open and returns to the trigger on close.
Presses outside do nothing; Escape cancels.
Cancel and Action keep their visible text as the accessible name.

Keyboard interactions
Key	Action
`Tab / Shift + Tab`	Moves between Cancel and the action.
`Enter / Space`	Activates the focused button.
`Esc`	Cancels and closes the dialog.

Responsive behavior

Buttons stack full-width below the sm breakpoint, with the action on top.

Platform notes

Web

Rendered in a portal with the page scroll locked.

iOS

Rendered in a native portal above navigation.