Alert - Ant Design

When To Use

When you need to show alert messages to users.
When you need a persistent static container which is closable by user actions.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
action	The action of Alert	ReactNode	-	4.9.0
afterClose	Called when close animation is finished	() => void	-
banner	Whether to show as banner	boolean	false
closable	The config of closable, >=5.15.0: support `aria-*`	boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes)	`false`
description	Additional content of Alert	ReactNode	-
icon	Custom icon, effective when `showIcon` is true	ReactNode	-
message	Content of Alert	ReactNode	-
showIcon	Whether to show icon	boolean	false, in `banner` mode default is true
type	Type of Alert styles, options: `success`, `info`, `warning`, `error`	string	`info`, in `banner` mode default is `warning`
onClose	Callback when Alert is closed	(e: MouseEvent) => void	-

Alert.ErrorBoundary

Property	Description	Type	Default	Version
description	Custom error description to show	ReactNode	{{ error stack }}
message	Custom error message to show	ReactNode	{{ error }}

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
defaultPadding	Default padding	Padding<string \| number> \| undefined	8px 12px
withDescriptionIconSize	Icon size with description	number	24
withDescriptionPadding	Padding with description	Padding<string \| number> \| undefined	20px 24px

Global TokenHow to use?