---
title: Alert 警告提示
order: 11
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

Alert 提示，展现需要关注的信息。非浮层的静态展现形式，始终展现，不会自动消失。

### 使用原则

- 无标题提示：默认无关闭图标；非常驻提示，可以增加关闭图标；一行时可增加操作按钮在内容后方，多行时按钮位置根据情况调整。
- 有标题提示：默认无关闭图标；非常驻提示，可以增加关闭图标。

### 基本使用

有四种基本样式：`success`、`error`、`info`、`warning`。

```jsx
import React from 'react';
import { Alert, Form } from 'quanta-design';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert type="success" message="这是一个成功提示文案" />
    </Form.Item>
    <Form.Item label="error">
      <Alert type="error" message="这是一个失败提示文案" />
    </Form.Item>
    <Form.Item label="info">
      <Alert type="info" message="这是一个温馨提示的文案" />
    </Form.Item>
    <Form.Item label="warning">
      <Alert type="warning" message="这是一个警告提示文案" />
    </Form.Item>
  </Form>
);
```

### 加上图标

```jsx
import React from 'react';
import { Alert, Form } from 'quanta-design';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert type="success" message="这是一个成功提示文案" showIcon />
    </Form.Item>
    <Form.Item label="error">
      <Alert type="error" message="这是一个失败提示文案" showIcon />
    </Form.Item>
    <Form.Item label="info">
      <Alert type="info" message="这是一个温馨提示的文案" showIcon />
    </Form.Item>
    <Form.Item label="warning">
      <Alert type="warning" message="这是一个警告提示文案" showIcon />
    </Form.Item>
  </Form>
);
```

### 可关闭

```jsx
import React from 'react';
import { Alert, Form } from 'quanta-design';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert type="success" message="这是一个成功提示文案" showIcon closable />
    </Form.Item>
    <Form.Item label="error">
      <Alert type="error" message="这是一个失败提示文案" showIcon closable />
    </Form.Item>
    <Form.Item label="info">
      <Alert type="info" message="这是一个温馨提示的文案" showIcon closable />
    </Form.Item>
    <Form.Item label="warning">
      <Alert type="warning" message="这是一个警告提示文案" showIcon closable />
    </Form.Item>
  </Form>
);
```

### 带标题

```jsx
import React from 'react';
import { Alert, Form } from 'quanta-design';

const labelCol = { span: 3 };
const wrapperCol = { span: 21 };

export default () => (
  <Form labelCol={labelCol} wrapperCol={wrapperCol} labelAlign="left">
    <Form.Item label="success">
      <Alert
        type="success"
        message="这是一个成功提示文案标题"
        description="这是一个成功提示文案描述"
        showIcon
        closable
      />
    </Form.Item>
    <Form.Item label="error">
      <Alert
        type="error"
        message="这是一个失败提示文案标题"
        description="这是一个失败提示文案描述"
        showIcon
        closable
      />
    </Form.Item>
    <Form.Item label="info">
      <Alert
        type="info"
        message="这是一个温馨提示的文案标题"
        description="这是一个温馨提示的文案描述"
        showIcon
        closable
      />
    </Form.Item>
    <Form.Item label="warning">
      <Alert
        type="warning"
        message="这是一个警告提示文案标题"
        description="这是一个警告提示文案描述"
        showIcon
        closable
      />
    </Form.Item>
  </Form>
);
```

## API

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

### Alert.ErrorBoundary

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