Core ElementsFree

Alert Dialog

A dialog for confirmations and destructive actions: a click outside does not close it, only a button or Escape does.

Usage

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@wunderui/react"

Examples

Default

Asks before leaving with unsaved changes — click it to open the real dialog.

Leave this page?

You have unsaved changes. If you leave now, your edits will be lost.

Destructive

The red action and icon for something that cannot be undone — click to open.

Delete account?

This permanently removes your account, all projects and billing history. This action cannot be undone.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Remove team member

Removing someone from a team asks for confirmation first, and only the two buttons or Escape close the dialog.

Team members

3 people in WunderUI Design

MLMira LindqvistEditor

JWJonas WeberViewer

LFLena FischerEditor

API Reference

Prop	Type	Default
AlertDialogAction variant	"primary" \| "destructive"	"primary"

PreviousAgenda NextAvatar