Alert 警告 - Heroui

引入

tsx

import { Alert } from '@heroui/react';

用法

组件结构

导入 Alert 组件后，可通过点语法访问所有子部分。

tsx

import { Alert } from '@heroui/react';

export default () => (
  <Alert>
    <Alert.Indicator />
    <Alert.Content>
      <Alert.Title />
      <Alert.Description />
    </Alert.Content>
  </Alert>
)

样式

传入 Tailwind CSS 类

tsx

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 指令。

了解更多。

css

@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 说明文本