logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Notification

Prompt notification message globally.
Importimport { notification } from "antd";
Sourcecomponents/notification
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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:

PropertyDescriptionTypeDefaultVersion
actionsCustomized button groupReactNode-5.24.0
btnCustomized close button group, please use actions insteadReactNode--
classNameCustomized CSS classstring--
closeIconCustom close iconReactNodetrue5.7.0: close button will be hidden when setting to null or false
descriptionThe content of notification box (required)ReactNode--
durationTime in seconds before Notification is closed. When set to 0 or null, it will never be closed automaticallynumber4.5-
showProgressShow progress bar for auto-closing notificationboolean5.18.0
pauseOnHoverkeep the timer running or not on hoverbooleantrue5.18.0
iconCustomized iconReactNode--
keyThe unique identifier of the Notificationstring--
messageThe title of notification box (required)ReactNode--
placementPosition of Notification, can be one of top | topLeft | topRight | bottom | bottomLeft | bottomRightstringtopRight-
styleCustomized inline styleCSSProperties--
roleThe 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 | statusalert5.6.0
onClickSpecify a function that will be called when the notification is clickedfunction--
onCloseTrigger when notification closedfunction--
propsAn 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:

PropertyDescriptionTypeDefaultVersion
bottomDistance from the bottom of the viewport, when placement is bottom bottomRight or bottomLeft (unit: pixels)number24
closeIconCustom close iconReactNodetrue5.7.0: close button will be hidden when setting to null or false
getContainerReturn the mount node for Notification() => HTMLNode() => document.body
placementPosition of Notification, can be one of top | topLeft | topRight | bottom | bottomLeft | bottomRightstringtopRight
showProgressShow progress bar for auto-closing notificationboolean5.18.0
pauseOnHoverkeep the timer running or not on hoverbooleantrue5.18.0
rtlWhether to enable RTL modebooleanfalse
stackNotifications will be stacked when amount is over thresholdboolean | { threshold: number }{ threshold: 3 }5.10.0
topDistance from the top of the viewport, when placement is top topRight or topLeft (unit: pixels)number24
maxCountMax Notification show, drop oldest if exceed limitnumber-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

js
notification.config({
placement: 'bottomRight',
bottom: 50,
duration: 3,
rtl: true,
});
PropertyDescriptionTypeDefaultVersion
bottomDistance from the bottom of the viewport, when placement is bottom bottomRight or bottomLeft (unit: pixels)number24
closeIconCustom close iconReactNodetrue5.7.0: close button will be hidden when setting to null or false
durationTime in seconds before Notification is closed. When set to 0 or null, it will never be closed automaticallynumber4.5
getContainerReturn the mount node for Notification, but still display at fullScreen() => HTMLNode() => document.body
placementPosition of Notification, can be one of top topLeft topRight bottom bottomLeft bottomRightstringtopRight
showProgressShow progress bar for auto-closing notificationboolean5.18.0
pauseOnHoverkeep the timer running or not on hoverbooleantrue5.18.0
rtlWhether to enable RTL modebooleanfalse
topDistance from the top of the viewport, when placement is top topRight or topLeft (unit: pixels)number24
maxCountMax Notification show, drop oldest if exceed limitnumber-4.17.0

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
widthWidth of Notificationstring | number384
zIndexPopupz-index of Notificationnumber2050
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:

tsx
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Notification with icon

A notification box with a icon at the left side.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customized Icon

The icon can be customized to any react node.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customized style

The style and className are available to customize Notification.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Stack

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.10.0
Static Method (deprecated)

Static methods cannot consume Context. Please use hooks first.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom close button

To customize the style or font of the close button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Placement

A notification box can appear from the top bottom topLeft topRight bottomLeft or bottomRight of the viewport via placement.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Update Message Content

Update content with unique key.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Show with progress

Show progress bar for auto-closing notification.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.18.0
Enabled:
Threshold: