111k
新建

Alert

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">Enable</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"

RTL

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

"use client"

import * as React from "react"

API 参考

Alert

Alert 组件用于显示吸引用户注意的提示块。

PropTypeDefault
variant"default" | "destructive""default"

AlertTitle

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

PropTypeDefault
classNamestring-

AlertDescription

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

PropTypeDefault
classNamestring-

AlertAction

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

PropTypeDefault
classNamestring-