2016-07-04 10:49:26 +08:00
---
category: Components
2016-09-21 11:28:38 +08:00
title: Alert
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ct7bT7rrTTAAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-U3XQqYN7VsAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
group:
title: Feedback
order: 6
2016-07-04 10:49:26 +08:00
---
Alert component for feedback.
2016-09-10 13:43:30 +08:00
## When To Use
2016-07-04 10:49:26 +08:00
2017-09-10 21:40:07 +08:00
- When you need to show alert messages to users.
2016-11-29 17:13:24 +08:00
- When you need a persistent static container which is closable by user actions.
2016-07-04 10:49:26 +08:00
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/style.tsx" > More types< / code >
< code src = "./demo/closable.tsx" > Closable< / code >
< code src = "./demo/description.tsx" > Description< / code >
< code src = "./demo/icon.tsx" > Icon< / code >
2022-11-17 11:30:20 +08:00
< code src = "./demo/banner.tsx" iframe = "250" > Banner< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/loop-banner.tsx" > Loop Banner< / code >
< code src = "./demo/smooth-closed.tsx" > Smoothly Unmount< / code >
< code src = "./demo/error-boundary.tsx" > ErrorBoundary< / code >
< code src = "./demo/custom-icon.tsx" debug > Custom Icon< / code >
< code src = "./demo/action.tsx" > Custom action< / code >
2023-08-17 15:00:04 +08:00
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2016-07-04 10:49:26 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| action | The action of Alert | ReactNode | - | 4.9.0 |
| afterClose | Called when close animation is finished | () => void | - | |
| banner | Whether to show as banner | boolean | false | |
2023-06-13 14:38:18 +08:00
| closeIcon | Custom close icon, >=5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | `<CloseOutlined />` | |
2022-11-17 17:31:26 +08:00
| description | Additional content of Alert | ReactNode | - | |
| icon | Custom icon, effective when `showIcon` is true | ReactNode | - | |
| message | Content of Alert | ReactNode | - | |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | |
| type | Type of Alert styles, options: `success` , `info` , `warning` , `error` | string | `info` , in `banner` mode default is `warning` | |
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - | |
2019-12-11 14:15:45 +08:00
### Alert.ErrorBoundary
2021-10-13 18:58:30 +08:00
| Property | Description | Type | Default | Version |
| ----------- | -------------------------------- | --------- | ----------------- | ------- |
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} | |
2023-09-22 09:57:58 +08:00
## Design Token
< ComponentTokenTable component = "Alert" > < / ComponentTokenTable >
