124k
New

提示

PreviousNext

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

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