Overlay

Alert Dialog

An alert dialog that interrupts the user's workflow and requires explicit confirmation, ideal for irreversible or destructive actions.

Installation

bash

npx polyui add alert-dialog

Basic Usage

Compose AlertDialog with its sub-components to build an alert dialog.

tsx

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@polyui/react/alert-dialog"
import { Button } from "@polyui/react/button"
import { TriangleAlert } from "lucide-react"
export function AlertDialogUsage() {
  return (
    <div className="flex flex-wrap gap-3">
      {/* Basic confirm dialog */}
      <AlertDialog>
        <AlertDialogTrigger render={<Button variant="outline">Open Alert Dialog</Button>} />
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. Please confirm that you want to proceed.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Confirm</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Destructive confirm dialog */}
      <AlertDialog>
        <AlertDialogTrigger render={<Button variant="destructive">Delete Account</Button>} />
        <AlertDialogContent>
          <AlertDialogHeader>
            <div className="flex items-center gap-2 text-destructive">
              <TriangleAlert className="size-5" />
              <AlertDialogTitle className="text-destructive">Delete Account</AlertDialogTitle>
            </div>
            <AlertDialogDescription>
              This will permanently delete your account and remove all associated data. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

Destructive

For irreversible operations like deletion, use variant="destructive" on AlertDialogAction to emphasize the risk.

tsx

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@polyui/react/alert-dialog"
import { Button } from "@polyui/react/button"
import { TriangleAlert } from "lucide-react"
export function AlertDialogDestructive() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive">Delete Account</Button>} />
      <AlertDialogContent>
        <AlertDialogHeader>
          <div className="flex items-center gap-2 text-destructive">
            <TriangleAlert className="size-5" />
            <AlertDialogTitle className="text-destructive">Delete Account</AlertDialogTitle>
          </div>
          <AlertDialogDescription>
            This will permanently delete your account and remove all associated data. This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

With Media

Use AlertDialogMedia to display an icon alongside the title for stronger visual cues.

svelte

<script lang="ts">
  import {
    AlertDialog,
    AlertDialogTrigger,
    AlertDialogContent,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogAction,
    AlertDialogCancel,
  } from "@polyui/svelte/alert-dialog"
  import { Button } from "@polyui/svelte/button"
  import { TriangleAlert } from "lucide-svelte"
</script>

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open Warning Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div class="flex items-center gap-2">
        <TriangleAlert class="size-5" />
      </div>
      <AlertDialogTitle>Warning</AlertDialogTitle>
      <AlertDialogDescription>
        This action has serious consequences.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Proceed</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Props

属性	类型	默认值	说明
`AlertDialogContent › size`	`"default" \| "sm"`	`"default"`	Width size of the dialog.
`AlertDialogAction › variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`	Visual variant of the action button; use destructive for dangerous operations.
`AlertDialogCancel › variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"outline"`	Visual variant of the cancel button.