---
title: Alert 警告
description: 向用户展示重要消息与通知，并提供状态指示
links:
  source: alert/alert.tsx
  styles: alert.css
  storybook: Components/Feedback/Alert
  figma: true
---

## 用法

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

<ComponentPreview
  name="alert-basic"
/>

## 组件结构

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

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

## 自定义样式

### Tailwind CSS

<ComponentPreview name="alert-custom-styles" />

### 全局 CSS

要自定义 Alert 的组件类，可使用 `@layer components` 指令。
[了解更多](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes)。

```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](https://getbem.com/) 方法论，确保组件变体与状态可复用且易于自定义。

### CSS 类

Alert 使用以下 CSS 类（[查看源码样式](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/alert.css)）：

#### 基础类 [!toc]
- `.alert` - Alert 根容器
- `.alert__indicator` - 图标/指示器容器
- `.alert__content` - 包裹标题与说明的内容容器
- `.alert__title` - Alert 标题文本
- `.alert__description` - Alert 说明文本

#### 状态变体类 [!toc]
- `.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 说明文本 |

## 相关组件

<RelatedComponents component="alert" />