浮层组件

Alert Dialog 警告对话框

需要用户明确确认的警告对话框，打断用户操作流程，强制要求做出响应，适用于不可撤销的危险操作。

安装

bash

npx polyui add alert-dialog

基础用法

使用 AlertDialog、AlertDialogTrigger、AlertDialogContent 等子组件组合构建警告对话框。

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>
  )
}

危险操作

对于删除等不可逆操作，使用 AlertDialogAction 的 variant="destructive" 强调风险。

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>
  )
}

带媒体

使用 AlertDialogMedia 在标题旁展示图标，增强视觉提示。

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>

属性

属性	类型	默认值	说明
`AlertDialogContent › size`	`"default" \| "sm"`	`"default"`	对话框的宽度尺寸。
`AlertDialogAction › variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`	确认按钮的视觉变体，危险操作建议用 destructive。
`AlertDialogCancel › variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"outline"`	取消按钮的视觉变体。