ProComponents, templates & AI tooling
HeroUI
27.7k

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 的视觉状态
classNamestring-附加的 CSS 类
childrenReactNode-Alert 内容

Alert.Indicator

Prop类型默认值描述
classNamestring-附加的 CSS 类
childrenReactNode-自定义指示图标(默认显示状态图标)

Alert.Content

Prop类型默认值描述
classNamestring-附加的 CSS 类
childrenReactNode-内容(通常为 Title 与 Description)

Alert.Title

Prop类型默认值描述
classNamestring-附加的 CSS 类
childrenReactNode-Alert 标题文本

Alert.Description

Prop类型默认值描述
classNamestring-附加的 CSS 类
childrenReactNode-Alert 说明文本

相关组件

本页目录