Alert 警告
向用户展示重要消息与通知,并提供状态指示
用法
import { Alert } from '@heroui/react';组件结构
import { Alert } from '@heroui/react';
export default () => (
<Alert>
<Alert.Indicator />
<Alert.Content>
<Alert.Title />
<Alert.Description />
</Alert.Content>
</Alert>
)自定义样式
Tailwind CSS
全局 CSS
要自定义 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
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
status | "default" | "accent" | "success" | "warning" | "danger" | "default" | Alert 的视觉状态 |
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | Alert 内容 |
Alert.Indicator
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | 自定义指示图标(默认显示状态图标) |
Alert.Content
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | 内容(通常为 Title 与 Description) |
Alert.Title
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | Alert 标题文本 |
Alert.Description
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 附加的 CSS 类 |
children | ReactNode | - | Alert 说明文本 |





