# Alert 警告 · HeroUI

> 向用户展示重要消息与通知，并提供状态指示。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/components/alert
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 引入

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

### 用法


> 示例 `alert-basic`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/alert


### 组件结构

导入 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` 指令。
  
[了解更多](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)）：

#### 基础类
- `.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 说明文本 |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt