提示

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

Radix UI Base UI

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

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>

示例

基础示例

一个带图标、标题和描述的基础提示。

Account updated successfully

Your profile information has been saved. Changes will be reflected immediately.

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

危险示例

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

Payment failed

Your payment could not be processed. Please check your payment method and try again.

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

操作示例

使用 AlertAction 添加按钮或其他操作元素到提示框中。

Dark mode is now available

Enable it under your profile settings to get started.

import {
  Alert,
  AlertAction,

自定义颜色

你可以通过为 Alert 组件添加自定义类，如 bg-amber-50 dark:bg-amber-950 来定制提示框颜色。

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

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

API 参考

Alert

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

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

AlertTitle

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

属性	类型	默认值
`className`	`string`	-

AlertDescription

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

属性	类型	默认值
`className`	`string`	-

AlertAction

AlertAction 组件显示一个操作元素（比如按钮），定位在提示框的右上角。

属性	类型	默认值
`className`	`string`	-

手风琴警告对话框

安装使用方法示例基础示例危险示例操作示例自定义颜色 API 参考 Alert AlertTitle AlertDescription AlertAction