Search
Alert
Alert component for feedback.
When to use
When you need to show alert messages to users.
When you need a persistent static container which is closable by user actions.
When you need a persistent static container which is closable by user actions.
Basic
The simplest usage for short messages.
More types
There are 4 types of Alert: success, info, warning, error.
Closable
To show close button.
Description
Additional description for alert message.
Customized Close Text
Replace the default icon with customized text.
Icon
A relevant icon will make information clearer and more friendly.
Detailed description and advice about successful copywriting.
Additional description and information about copywriting.
This is a warning notice about copywriting.
This is an error message about copywriting.
Loop Banner
Banner
Display Alert as a banner at top of page.
Smoothly Unmount
Smoothly unmount Alert upon close.
placeholder text here
React error handling
API
| Property | Description | Type | Default |
|---|---|---|---|
afterClose | Called when close animation is finished | () => void | - |
banner | Whether to show as banner | boolean | false |
closable | Whether Alert can be closed | boolean | - |
closeText | Close text to show | string|ReactNode | - |
description | Additional content of Alert | string|ReactNode | - |
icon | Custom icon, effective when showIcon is true | ReactNode | - |
message | Content of Alert | string|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 | - |
Alert.ErrorBoundary
| Property | Description | Type | Default |
|---|---|---|---|
message | custom error message to show | ReactNode | {{ error }} |
description | custom error description to show | ReactNode | {{ error stack }} |