106k
New

警告提示

PreviousNext

显示一个提示框以吸引用户注意。

Radix UIBase UI
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CheckCircle2Icon, InfoIcon } from "lucide-react"

安装

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>

示例

基础

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

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CheckCircle2Icon } from "lucide-react"

危险

使用 variant="destructive" 创建一个危险警告提示。

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircleIcon } from "lucide-react"

操作

使用 AlertAction 在警告提示中添加按钮或其它操作元素。

import {
  Alert,
  AlertAction,

自定义颜色

您可以通过向 Alert 组件添加自定义类，例如 bg-amber-50 dark:bg-amber-950，来自定义警示颜色。

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertTriangleIcon } from "lucide-react"

API 参考

Alert

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

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

AlertTitle

AlertTitle 组件用于显示警告提示的标题。

属性类型默认值
classNamestring-

AlertDescription

AlertDescription 组件用于显示警告提示的描述或内容。

属性类型默认值
classNamestring-

AlertAction

AlertAction 组件用于显示操作元素（如按钮），该元素绝对定位于警告提示的右上角。

属性类型默认值
classNamestring-