Alert

Used to display warning information in a way that attracts attention.

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: Warning prompts. Suitable for displaying short warning prompts in a way that attracts attention.
Different type: There are four types of warnings: info, success, warning, and error.
Closable: Use closable = true to turn on the close button.
Custom close element: Use closeElement to customize the close element. closeElement can receive onClick, has its own close parameter, and can be closed by calling close().
With title: content is turned into auxiliary introduction text with presence of title.
Without icon: Use showIcon=false to hide the icon.
Top Banner: Use banner = true to display Alert as a banner on top of the page.
Action: Customize the action items through action.

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

Alert

Property	Description	Type	DefaultValue
banner	Whether to show as banner	boolean	`-`
closable	Whether Alert can be closed	boolean	`-`
showIcon	Whether to show icon	boolean	`true`
type	Type of Alert	'info' \| 'success' \| 'warning' \| 'error'	`info`
action	Custom action item	ReactNode	`-`
closeElement	Custom close button	ReactNode	`-`
content	Alert content	ReactNode	`-`
icon	Custom icon, effective when `showIcon` is `true`	ReactNode	`-`
title	Alert title	ReactNode	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`
afterClose	Callback when Alert close animation is complete	() => void	`-`
onClose	Callback when Alert is closed	(e) => void	`-`