Importimport { notification } from 'antd'; |
Importimport { notification } from 'antd'; |
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
Common props ref：Common props
notification.success(config)notification.error(config)notification.info(config)notification.warning(config)notification.open(config)notification.destroy(key?: String)The properties of config are as follows:
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| actions | Customized button group | ReactNode | - | 5.24.0 | × |
Customized close button group, please use actions instead | ReactNode | - | - | × | |
| className | Customized CSS class | string | - | - | 5.7.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| closable | Whether to show the close button | boolean | ClosableType | true | - | × |
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | 5.14.0 |
| description | The content of notification box (required) | ReactNode | - | - | × |
| duration | Time in seconds before Notification is closed. When set to 0 or false, it will never be closed automatically | number | false | 4.5 | - | × |
| showProgress | Show progress bar for auto-closing notification | boolean | 5.18.0 | × | |
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 | × |
| icon | Customized icon | ReactNode | - | - | × |
| key | The unique identifier of the Notification | string | - | - | × |
| title | The title of notification box | ReactNode | - | 6.0.0 | × |
The title of notification box (deprecated), please use title instead | ReactNode | - | - | × | |
| placement | Position of Notification, can be one of top | topLeft | topRight | bottom | bottomLeft | bottomRight | string | topRight | - | × |
| role | The semantics of notification content recognized by screen readers. The default value is alert. When set as the default value, the screen reader will promptly interrupt any ongoing content reading and prioritize the notification content for immediate attention. | alert | status | alert | 5.6.0 | × |
| style | Customized inline style | CSSProperties | - | - | 5.7.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| onClick | Specify a function that will be called when the notification is clicked | function | - | - | × |
| onClose | Trigger when notification closed | function | - | - | × |
| props | An object that can contain data-*, aria-*, or role props, to be put on the notification div. This currently only allows data-testid instead of data-* in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. | Object | - | - | × |
notification.useNotification(config)The properties of config are as follows:
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| bottom | Distance from the bottom of the viewport, when placement is bottom bottomRight or bottomLeft (unit: pixels) | number | 24 | × | |
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | 5.14.0 |
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body | × | |
| placement | Position of Notification, can be one of top | topLeft | topRight | bottom | bottomLeft | bottomRight | string | topRight | × | |
| showProgress | Show progress bar for auto-closing notification | boolean | 5.18.0 | × | |
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 | × |
| rtl | Whether to enable RTL mode | boolean | false | × | |
| stack | Notifications will be stacked when amount is over threshold | boolean | { threshold: number } | { threshold: 3 } | 5.10.0 | × |
| top | Distance from the top of the viewport, when placement is top topRight or topLeft (unit: pixels) | number | 24 | × | |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 | × |
notification also provides a global config() method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| closeIcon | Custom close icon | ReactNode | undefined | - |
| onClose | Trigger when notification close | Function | undefined | - |
notification.config(options)
When you use
ConfigProviderfor global configuration, the system will automatically start RTL mode by default.(4.3.0+)When you want to use it alone, you can start the RTL mode through the following settings.
notification.config({placement: 'bottomRight',bottom: 50,duration: 3,rtl: true,});
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| bottom | Distance from the bottom of the viewport, when placement is bottom bottomRight or bottomLeft (unit: pixels) | number | 24 | |
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
| 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, but still display at fullScreen | () => HTMLNode | () => document.body | |
| placement | Position of Notification, can be one of top topLeft topRight bottom bottomLeft bottomRight | string | topRight | |
| showProgress | Show progress bar for auto-closing notification | boolean | 5.18.0 | |
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
| rtl | Whether to enable RTL mode | boolean | false | |
| top | Distance from the top of the viewport, when placement is top topRight or topLeft (unit: pixels) | number | 24 | |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorErrorBg | Background color of error notification container | string | |
| colorInfoBg | Background color of info notification container | string | |
| colorSuccessBg | Background color of success notification container | string | |
| colorWarningBg | Background color of warning notification container | string | |
| progressBg | Background color of Notification progress bar | string | linear-gradient(90deg, #69b1ff, #1677ff) |
| width | Width of Notification | string | number | 384 |
| zIndexPopup | z-index of Notification | number | 2050 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorBgTextActive | Control the background color of text in active state. | string | rgba(0,0,0,0.15) |
| colorBgTextHover | Control the background color of text in hover state. | string | rgba(0,0,0,0.06) |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorIconHover | Weak action hover color. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.88) |
| colorInfo | Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorWarning | Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens. | string | #faad14 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| boxShadow | Control the box shadow style of an element. | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| controlHeightLG | LG component height | number | 40 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginLG | Control the margin of an element, with a large size. | number | 24 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXL | Control the margin of an element, with the largest size. | number | 48 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| paddingContentHorizontalLG | Control the horizontal padding of content element, suitable for large screen devices. | number | 24 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingMD | Control the medium padding of the element. | number | 20 |
locale/prefixCls/theme in notification?When you call notification methods, antd dynamically creates a React instance using ReactDOM.render, which runs in a different execution context than your original code.
When you need context info (like ConfigProvider context), you can use notification.useNotification to get api instance and contextHolder node. And put it in your children:
const [api, contextHolder] = notification.useNotification();return (<Context1.Provider value="Ant">{/* contextHolder is inside Context1 which means api will get value of Context1 */}{contextHolder}<Context2.Provider value="Design">{/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}</Context2.Provider></Context1.Provider>);
Note: You must insert contextHolder into your children with hooks. You can use origin method if you do not need context connection.
App wrapper component can be used to simplify the problem of
useNotificationand other methods that need to manually implant contextHolder.
You can config with ConfigProvider.config