Search
Message
Display global messages as feedback in response to user operations.
When to use
To provide feedback such as success, warning, error etc.
A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
Normal prompt
Normal message for information.
Other types of message
Messages of success, error and warning types.
Customize duration
Customize message display duration from default 3s to 10s.
Message with loading indicator
Display a global loading indicator, which is dismissed by itself asynchronously.
Promise interface
message provides a promise interface for onClose. The above example will display a new message when the old message is about to close.
Update Message Content
Update message content with unique key.
Customized style
The style and className are available to customize Message.
Get context with hooks (4.5.0+)
Use message.useMessage to get contextHolder with context accessible issue.
API
| Property | Description | Type | Default |
|---|---|---|---|
content | content of the message | string|ReactNode|config | - |
duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |
onClose | Specify a function that will be called when the message is closed | Function | - |
The properties of config are as follows:
| Property | Description | Type | Default |
|---|---|---|---|
content | content of the message | ReactNode | - |
duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
onClose | Specify a function that will be called when the message is closed | function | - |
icon | Customized Icon | ReactNode | - |
key | The unique identifier of the Message | string|number | - |
className | Customized CSS class | string | - |
style | Customized inline style | - |
Global static methods
| Property | Description | Type | Default |
|---|---|---|---|
duration | time before auto-dismiss, in seconds | number | 1.5 |
getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
maxCount | max message show, drop oldest if exceed limit | number | - |
top | distance from top | number | 24 |
rtl | whether to enable RTL mode | boolean | false |