Search
Notification
Display a notification message globally.
When to use
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
A notification with complex content.
A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
A notification that is pushed by the application.
A notification with complex content.
A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
A notification that is pushed by the application.
Basic
The simplest usage that close the notification box after 4.5s.
Duration after which the notification box is closed
Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.
Notification with icon
A notification box with a icon at the left side.
Custom close button
To customize the style or font of the close button.
Customized Icon
The icon can be customized to any react node.
Customized style
The style and className are available to customize Notification.
Placement
A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.
Get context with hooks
Use notification.useNotification to get contextHolder with context accessible issue.
Update Message Content
Update content with unique key.
API
| Property | Description | Type | Default |
|---|---|---|---|
bottom | Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels). | number | 24 |
btn | Customized close button | ReactNode | - |
className | Customized CSS class | string | - |
description | The content of notification box (required) | string|ReactNode | - |
duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
icon | Customized icon | ReactNode | - |
closeIcon | custom close icon | ReactNode | - |
key | The unique identifier of the Notification | string | - |
message | The title of notification box (required) | string|ReactNode | - |
onClose | Trigger when notification closed | Function | - |
onClick | Specify a function that will be called when the notification is clicked | Function | - |
placement | Position of Notification, can be one of topLeft topRight bottomLeft bottomRight | string | topRight |
style | Customized inline style | - | |
top | Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels). | number | 24 |
notification.config(options)
| Property | Description | Type | Default |
|---|---|---|---|
bottom | Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels). | number | 24 |
closeIcon | custom close icon | ReactNode | - |
duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
placement | Position of Notification, can be one of topLeft topRight bottomLeft bottomRight | string | topRight |
top | Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels). | number | 24 |
rtl | whether to enable RTL mode | boolean | false |