111k
新建

Alert Dialog

PreviousNext

一个模态对话框，会用重要内容打断用户并要求回应。

Radix UIBase UI
Radix 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 asChild>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</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,

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

size

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

PropTypeDefault
size"default" | "sm""default"

关于其他组件及其属性的更多信息，请参见 Radix UI 文档。