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

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
defaultPadding	默认内间距	undefined \| Padding<string \| number>	8px 12px
withDescriptionIconSize	带有描述时的图标尺寸	number	24
withDescriptionPadding	带有描述的内间距	undefined \| Padding<string \| number>	20px 24px

글로벌 토큰어떻게 사용하나요?