Alert
Alert
Display warning messages that require attention.
Importimport{ Alert }from"antd"; |
Sourcecomponents/alert |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Alert }from"antd"; |
Sourcecomponents/alert |
Common props ref：Common props
| 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 | |
| closable | The config of closable, >=5.15.0: support aria-* | boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
| 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 | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| defaultPadding | Default padding | undefined | Padding<string | number> | 8px 12px |
| withDescriptionIconSize | Icon size with description | number | 24 |
| withDescriptionPadding | Padding with description | undefined | Padding<string | number> | 20px 24px |
Display Alert as a banner at top of page.
The simplest usage for short messages.
To show close button.
A relevant icon will make information clearer and more friendly.
Show a loop banner by using with react-text-loop-next or react-fast-marquee.
ErrorBoundary Component for making error handling easier in React.
Custom action.
There are 4 types of Alert: success, info, warning, error.
Additional description for alert message.
Smoothly unmount Alert upon close.
A relevant icon makes information clearer and more friendly.
Custom component token.
click the close button to see the effect
