Alert 警告
向用户展示重要消息与通知，并提供状态指示。
引入
import { Alert } from '@heroui/react';用法
新功能已上线
查看我们的最新更新，包括深色模式支持与改进的无障碍体验。有可用更新
应用有新版本可用。请刷新页面以获取最新功能与问题修复。无法连接到服务器
当前遇到连接问题，请尝试以下操作：- 检查网络连接
- 刷新页面
- 清除浏览器缓存
个人资料已更新
正在处理你的请求
正在同步你的数据，请稍候，这可能需要一点时间。计划维护
我们将于 UTC 时间 3 月 15 日（周日）凌晨 2:00 至上午 6:00 进行计划维护，期间服务将暂时不可用。import {Alert, Button, CloseButton, Spinner} from "@heroui/react";
import React from "react";
export function Basic() {
return (组件结构
导入 Alert 组件后，可通过点语法访问所有子部分。
import { Alert } from '@heroui/react';
export default () => (
<Alert>
<Alert.Indicator />
<Alert.Content>
<Alert.Title />
<Alert.Description />
</Alert.Content>
</Alert>
)样式
传入 Tailwind CSS 类
import { Alert } from "@heroui/react";
function CustomAlert() {
return (
<Alert className="border-2 border-blue-500 rounded-xl" status="accent">
<Alert.Indicator className="text-blue-600" />
<Alert.Content className="gap-1">
<Alert.Title className="font-bold text-lg">Custom Alert</Alert.Title>
<Alert.Description className="text-sm opacity-80">
This alert has custom styling applied
</Alert.Description>
</Alert.Content>
</Alert>
);
}自定义组件类
要自定义 Alert 的组件类，可使用 @layer components 指令。
了解更多。
@layer components {
.alert {
@apply rounded-2xl shadow-lg;
}
.alert__title {
@apply font-bold text-lg;
}
.alert--danger {
@apply border-l-4 border-red-600;
}
}HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
Alert 使用以下 CSS 类（查看源码样式）：
基础类
.alert— Alert 根容器.alert__indicator— 图标/指示器容器.alert__content— 包裹标题与说明的内容容器.alert__title— Alert 标题文本.alert__description— Alert 说明文本
状态变体类
.alert--default— 默认灰色状态.alert--accent— 强调蓝色状态.alert--success— 成功绿色状态.alert--warning— 警告黄/橙色状态.alert--danger— 危险红色状态
交互状态
Alert 主要用于信息展示，基础组件本身通常没有交互状态；但它可以包含按钮或关闭按钮等交互元素。
API 参考
Alert Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
status | "default" | "accent" | "success" | "warning" | "danger" | "default" | Alert 的视觉状态 |
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | Alert 内容 |
Alert.Indicator Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | 自定义指示图标（默认显示状态图标） |
Alert.Content Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | 内容（通常为 Title 与 Description） |
Alert.Title Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | Alert 标题文本 |
Alert.Description Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | Alert 说明文本 |
