109k
新建

提示框 (Alert)

上一篇下一篇

用于显示用户注意力的提示信息。

Radix UIBase UI
Radix UI - shadcn/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>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the 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 组件用于显示需要用户注意的提示信息。

属性类型默认
variant (变体)"default" | "destructive""default"

AlertTitle

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

属性类型默认
classNamestring-

AlertDescription

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

属性类型默认
classNamestring-

AlertAction

AlertAction 组件用于显示操作元素（如按钮），它会被绝对定位在提示框的右上角。

属性类型默认
classNamestring-