110k
New

提示

PreviousNext

显示一个提醒用户注意的提示框。

Radix UIBase UI
Radix 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>
    你可以使用命令行将组件和依赖添加到你的应用中。
  </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"

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-