--- category: Components title: Alert subtitle: 警告提示 description: 警告提示,展现需要关注的信息。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 group: title: 反馈 order: 6 --- ## 何时使用 - 当某个页面需要向用户显示警告的信息时。 - 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。 ## 代码演示 基本 四种样式 可关闭的警告提示 含有辅助性文字介绍 图标 顶部公告 轮播的公告 平滑地卸载 React 错误处理 自定义图标 操作 组件 Token ## API 通用属性参考:[通用属性](/docs/react/common-props) | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | action | 自定义操作项 | ReactNode | - | 4.9.0 | | afterClose | 关闭动画结束后触发的回调函数 | () => void | - | | | banner | 是否用作顶部公告 | boolean | false | | | closable | 可关闭配置,>=5.15.0: 支持 `aria-*` | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | `false` | | | 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 }} | | ## Design Token