警报

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add alert
Copy

用法

🌐 Usage

Copyimport {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

Copy<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>

示例

🌐 Examples

基础

🌐 Basic

一个带有图标、标题和描述的基本警报。

🌐 A basic alert with an icon, title and description.

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

破坏性

🌐 Destructive

使用 variant="destructive" 来创建破坏性警报。

🌐 Use variant="destructive" to create a destructive alert.

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

动作

🌐 Action

使用 AlertAction 将按钮或其他操作元素添加到警报中。

🌐 Use AlertAction to add a button or other action element to the alert.

import {
  Alert,
  AlertAction,

自定义颜色

🌐 Custom Colors

你可以通过向 Alert 组件添加自定义类，例如 bg-amber-50 dark:bg-amber-950，来自定义警报颜色。

🌐 You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

警报

🌐 Alert

Alert 组件显示一个提示以引起用户注意。

🌐 The Alert component displays a callout for user attention.

AlertTitle

AlertTitle 组件显示警报的标题。

🌐 The AlertTitle component displays the title of the alert.

AlertDescription

AlertDescription 组件显示警报的描述或内容。

🌐 The AlertDescription component displays the description or content of the alert.

AlertAction

AlertAction 组件显示一个操作元素（比如按钮），该元素绝对定位在警告的右上角。

🌐 The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.