Ant Design

⌘ K

5.22.2

Notification

Prompt notification message globally.

Importimport{ notification }from"antd";

Sourcecomponents/notification

Docs

Edit this page Changelog

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.

Examples

API

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
btn	Customized close button	ReactNode	-	-
className	Customized CSS class	string	-	-
closeIcon	Custom close icon	ReactNode	true	5.7.0: close button will be hidden when setting to null or false
description	The content of notification box (required)	ReactNode	-	-
duration	Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically	number	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	-	-
message	The title of notification box (required)	ReactNode	-	-
placement	Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	string	`topRight`	-
style	Customized inline style	CSSProperties	-	-
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
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
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
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.

Global configuration

notification.config(options)

When you use ConfigProvider for 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

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

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
width	Width of Notification	string \| number	384
zIndexPopup	z-index of Notification	number	2050

Global TokenHow to use?

FAQ

Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in notification?

antd will dynamic create React instance by ReactDOM.render when call notification methods. Whose context is different with origin code located context.

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 Package Component can be used to simplify the problem of useNotification and other methods that need to manually implant contextHolder.

How to set static methods prefixCls ？

You can config with ConfigProvider.config

Hooks usage (recommended)

Use notification.useNotification to get contextHolder with context accessible issue. Please note that, we recommend to use top level registration instead of notification static method, because static method cannot consume context, and ConfigProvider data will not work.

Notification with icon

A notification box with a icon at the left side.

Customized Icon

The icon can be customized to any react node.

Customized style

The style and className are available to customize Notification.

Stack

Stack configuration, enabled by default. More than 3 notifications will be automatically stacked, and could be changed by threshold.

5.10.0

Static Method (deprecated)

Static methods cannot consume Context. Please use hooks first.

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.