Notification

Display a notification message globally.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: The simplest usage.
Type: There are 5 different types of Notification: info, success, warning, error, normal.
Update: Specifying id to update the existing notification.
Update duration: Specifying id to update the existing notification's duration.
Custom action buttons: You can add operation buttons by specifying the btn field.
Customize style: You can set style and className to customize the style.
Position: Notification has 4 different positions, Top Left, Top Right (default), Bottom Left, Bottom Right.
Hooks - Usage: You can use useNotification to create a dialog that can read the context.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Notification

Property	Description	Type	DefaultValue	Version
closable	Whether to show the close button	boolean	`true`	-
showIcon	Whether to show the icon	boolean	`true`	-
duration	Automatic shutdown time, the unit is `ms`	number	`3000`	-
id	The unique identifier of the current notification, which can be used to update the message	string	`-`	-
position	The position of the message	'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'	`-`	-
btn	Add action button	ReactNode	`-`	-
closeIcon	Custom the close button on top-right of the drawer dialog	ReactNode	`-`	2.50.0
icon	Custom icon	ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
content	Notification content	ReactNode \| string (Required)	`-`	-
style	Additional style	CSSProperties	`-`	-
title	Notification title	ReactNode \| string	`-`	-
onClose	Callback when close	() => void	`-`	-

Methods

Global config

Notification.config(options)

Property	Description	Type	Default
maxCount	Maximum number of notifications	`number`	`-`
getContainer	Container of the notification	`() => HTMLElement`	`() => document.body`
duration	The time when the notification is automatically closed	`number`	`3000`
prefixCls	ClassName prefix	`string`	`arco`