Alert

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

<!-- prettier-ignore -->

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/style.tsx">More types</code> <code src="./demo/filled.tsx">Filled</code> <code src="./demo/closable.tsx">Closable</code> <code src="./demo/description.tsx">Description</code> <code src="./demo/icon.tsx">Icon</code> <code src="./demo/banner.tsx" iframe="250">Banner</code> <code src="./demo/loop-banner.tsx">Loop Banner</code> <code src="./demo/smooth-closed.tsx">Smoothly Unmount</code> <code src="./demo/error-boundary.tsx">ErrorBoundary</code> <code src="./demo/custom-icon.tsx" debug>Custom Icon</code> <code src="./demo/action.tsx">Custom action</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

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		×
variant	Variant of Alert style	outlined | filled	outlined	6.4.0	6.4.0
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	-		×
closeIcon	Custom close icon, please use closable.closeIcon instead	ReactNode	-	-	×
closeText	Close text to show, please use closable.closeIcon instead	ReactNode	-	-	×
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

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Alert"></ComponentTokenTable>