120k
New

警告

PreviousNext

显示用于提醒用户注意的提示框。

Base UIReact AriaRadix UI
import { CheckCircle2Icon, InfoIcon } from "lucide-react"

import {

安装

pnpm dlx shadcn@latest add alert

用法

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
<Alert>
  <InfoIcon />
  <AlertTitle>请注意！</AlertTitle>
  <AlertDescription>
    你可以使用 cli 将组件和依赖项添加到应用中。
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">启用</Button>
  </AlertAction>
</Alert>

组合

使用以下组合构建一个 Alert：

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

基础

带有图标、标题和描述的基础警告。

import { CheckCircle2Icon } from "lucide-react"

import {

破坏性

使用 variant="destructive" 创建破坏性警告。

import { AlertCircleIcon } from "lucide-react"

import {

操作

使用 AlertAction 向警告框添加按钮或其他操作元素。

import {
  Alert,
  AlertAction,

自定义颜色

您可以通过向 Alert 组件添加 bg-amber-50 dark:bg-amber-950 等自定义类来设置警告颜色。

import { AlertTriangleIcon } from "lucide-react"

import {

RTL

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

"use client"

import * as React from "react"

API 参考

Alert

Alert 组件显示用于提醒用户注意的提示框。

属性类型默认值
variant"default" | "destructive""default"

AlertTitle

AlertTitle 组件显示提示框的标题。

属性类型默认值
classNamestring-

AlertDescription

AlertDescription 组件显示提示框的描述或内容。

属性类型默认值
classNamestring-

AlertAction

AlertAction 组件显示一个操作元素（如按钮），绝对定位在提示框的右上角。

属性类型默认值
classNamestring-