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	Global Config
action	The action of Alert	ReactNode	-		×
~~afterClose~~	Called when close animation is finished, please use `closable.afterClose` instead	() => void	-		×
banner	Whether to show as banner	boolean	false		×
classNames	Customize class for each semantic structure inside the component. Supports object or function	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-		6.0.0
closable	The config of closable	boolean \| ClosableType & React.AriaAttributes	`false`		✔
closeIcon	(Only supports global configuration) Custom close icon	ReactNode	-	×	6.3.0
description	Additional content of Alert	ReactNode	-		×
errorIcon	(Only supports global configuration) Custom error icon in Alert icon	ReactNode	-	×	6.2.0
icon	Custom icon, effective when `showIcon` is true	ReactNode	-		×
infoIcon	(Only supports global configuration) Custom info icon in Alert icon	ReactNode	-	×	6.2.0
~~message~~	Content of Alert, please use `title` instead	ReactNode	-		×
~~onClose~~	Callback when Alert is closed, please use `closable.onClose` instead	(e: MouseEvent) => void	-		×
showIcon	Whether to show icon	boolean	false, in `banner` mode default is true		×
styles	Customize inline style for each semantic structure inside the component. Supports object or function	Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>	-		6.0.0
successIcon	(Only supports global configuration) Custom success icon in Alert icon	ReactNode	-	×	6.2.0
title	Content of Alert	ReactNode	-		×
type	Type of Alert styles, options: `success`, `info`, `warning`, `error`	string	`info`, in `banner` mode default is `warning`		×
warningIcon	(Only supports global configuration) Custom warning icon in Alert icon	ReactNode	-	×	6.2.0

ClosableType

Property	Description	Type	Default	Version
afterClose	Called when close animation is finished	function	-	-
closeIcon	Custom close icon	ReactNode	-	-
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, please use `title` instead	ReactNode	{{ error }}
title	Custom error title to show	ReactNode	{{ error }}

Semantic DOM

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?