106k
New

警告对话框

PreviousNext

一个模态对话框，用于向用户显示重要内容并期待其响应。

Radix UIBase UI
import {
  AlertDialog,
  AlertDialogAction,

安装

pnpm dlx shadcn@latest add alert-dialog

用法

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    显示对话框
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>您确定要继续吗？</AlertDialogTitle>
      <AlertDialogDescription>
        此操作不可撤销。这将永久删除您在我们服务器上的账户。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>取消</AlertDialogCancel>
      <AlertDialogAction>继续</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

示例

基础示例

一个带有标题、描述，以及取消和继续按钮的基础警告对话框。

import {
  AlertDialog,
  AlertDialogAction,

小号

使用 size="sm" 属性可让警告对话框更小。

import {
  AlertDialog,
  AlertDialogAction,

媒体

使用 AlertDialogMedia 组件可向警告对话框添加媒体元素，如图标或图片。

import {
  AlertDialog,
  AlertDialogAction,

小号带媒体

使用 size="sm" 属性使警告对话框更小，同时使用 AlertDialogMedia 组件添加媒体元素，例如图标或图片。

import {
  AlertDialog,
  AlertDialogAction,

危险操作

使用 AlertDialogAction 组件向警告对话框添加一个危险操作按钮。

import {
  AlertDialog,
  AlertDialogAction,

API 参考

size

在 AlertDialogContent 组件上使用 size 属性来控制警告对话框的大小。它接受以下值：

属性类型默认值
size"default" | "sm""default"

有关其他组件及其属性的更多信息，请参阅 Base UI 文档。