---
title: Alert - 警告提示
path: /alert
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 6
  title: 反馈组件
  path: /feedback
---

## 基础告警

使用简洁文字提示的最基础警告条，包含 4 种情况的提示：普通消息，成功，警示，失败。

<code src="./demos/base.tsx" />

## 带图标的警告

带图标的告警可以让信息类型更加醒目。

<code src="./demos/icon.tsx" />

## 带关闭的警告

显示关闭按钮，点击可关闭警告提示。

<code src="./demos/close.tsx" />

## 带操作的警告

当需要对此警告做操作，可以配置信息来增加相关操作。（仅带图标的警告可带文字操作）

<code src="./demos/action.tsx" />

## 带相关描述文字的警告

当信息内容较复杂时，可使用相关描述文字辅助说明。

<code src="./demos/detail.tsx" />

## 顶部公告

可以当作顶部公告使用。

<code src="./demos/banner.tsx" />

## API

| 参数        | 说明                                                                 | 类型                    | 默认值                                    |
| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- |
| action      | 自定义操作项                                                         | ReactNode               | -                                         |
| afterClose  | 关闭动画结束后触发的回调函数                                         | () => void              | -                                         |
| banner      | 是否用作顶部公告                                                     | boolean                 | false                                     |
| closable    | 默认不显示关闭按钮                                                   | boolean                 | -                                         |
| closeText   | 自定义关闭按钮                                                       | ReactNode               | -                                         |
| closeIcon   | 自定义关闭 Icon                                                      | ReactNode               | `<Icon iconName={'CloseSmall'}></Icon>`   |
| description | 警告提示的辅助性文字介绍                                             | ReactNode               | -                                         |
| icon        | 自定义图标，`showIcon` 为 true 时有效                                | ReactNode               | -                                         |
| message     | 警告提示内容                                                         | ReactNode               | -                                         |
| showIcon    | 是否显示辅助图标                                                     | boolean                 | false，`banner` 模式下默认值为 true       |
| type        | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string                  | `info`，`banner` 模式下默认值为 `warning` |
| onClose     | 关闭时触发的回调函数                                                 | (e: MouseEvent) => void | -                                         |

### Alert.ErrorBoundary

| 参数        | 说明                                         | 类型      | 默认值            |
| ----------- | -------------------------------------------- | --------- | ----------------- |
| description | 自定义错误内容，如果未指定会展示报错堆栈     | ReactNode | {{ error stack }} |
| message     | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }}       |