Feedback · Notification
Notification
Notifications are used to actively send message notifications to users.

Demos

How to import

Basic Usage

Close after 3 seconds.

Position

Use position to set pop up position, supporting one of: top、bottom、topLeft、topRight(default)、bottomLeft、bottomRight。

With Icons

Use different methods to show Notification with icons or you can pass in icon for customized icon.

Colored Background

You could use theme for a colored background style. Default is normal.
Use with Typography to create operation links for more complicated situations.

Delay

Use duration to set up time delay. By default it closes after 3 seconds.

Manual Close

Set duration to 0 if you do not want the Notification to close by itself. In this case, it could only be closed manually.

Update content

You can use id to update notification content. >=2.45.0

API Reference

The static methods provided are as follows:
Display: You can pass in options object directly. Methods return the value of id: const id = Notification.open({ /*...options*/ })
  • Notification.open({content: 'message', duration: 3})
  • Notification.info({content: 'message', duration: 3})
  • Notification.error({content: 'message', duration: 3})
  • Notification.warning({content: 'message', duration: 3})
  • Notification.success({content: 'message', duration: 3})
Close Manually (id is the return value of the display methods)
  • Notification.close(id)
PropertiesInstructionstypeDefaultversion
contentContentReactNode''
durationAutomatic close delay, no auto-close when set to 0number3
getPopupContainerSpecifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set 'position: relative` This will change the DOM tree position, but not the view's rendering position.() => HTMLElement() => document.body0.34.0
iconTopleft iconReactNode
positionPop-up position, one of top、bottom、topLeft、topRight、bottomLeft、bottomRightstringtopRight
showCloseToggle Whether show close buttonbooleantrue0.25.0
themeStyle of background fill, one of light, normalstringnormal1.0.0
titleTitlestringReactNode''
zIndexZ-index value. Only take effect for the first time.number1010
onClickCallback function when clicking the notification(e: event) => void0.27 .0
onCloseCallback function when closing notification, triggered for either auto-close or manually close() => void
onCloseClickCallback function when actively clicking on the close button(id: string | number) => void
The global configuration is set before any method call, and takes effect only once (>= 0.25.0):
  • Notification.config(config)
PropertiesInstructionstypeDefaultversion
bottomBottom, absolute positionnumber | string-0.25.0
durationAutomatic close delay, no auto-close when set to 0number(second)30.25.0
leftLeft, absolute positionnumber | string-0.25.0
positionPop-up position, one of top、bottom、topLeft、topRight、bottomLeft、bottomRightstringtopRight0.25.0
rightRight, absolute positionnumber | string-0.25.0
topTop, absolute positionnumber | string-0.25.0
zIndexZ-indexnumber10100.25.0
Globally Destroy (>= 0.25.0):
  • Notification.destroyAll() ( >= 0.25.0 )
Hook Notification ( >= 1.2.0 )
  • Notification.useNotification
When you need access Context, you could use `Notification.useNotification to create a contextHolder and insert to corresponding DOM tree. Notification created by hooks will be able to access the context where contextHolder is inserted. Hook Notification has following methods: info, success, warning, error, open, close. For more usage demo, refer to useToast

Accessibility

ARIA

  • The role of the component is'alert'
  • The notification's aria-labelledby is marked as the corresponding notification title

Content Guidelines

  • Title
    • Explain in clear and concise language
    • Avoid punctuation such as commas, periods, etc.
  • Text
    • On the premise of complete information transmission, try to compress the text to 1-2 sentences
    • A detailed description or explanation of the title, rather than a repetition of the title
    • Use correct punctuation, commas within sentences and periods between sentences
  • Operate
    • The copy needs to show the specific meaning of the operation

Design Tokens