Alert

Display warning messages that require attention.

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

Basic

The simplest usage for short messages.

Filled

Hide the border with variant="filled".

Description

Additional description for alert message.

Banner

Display Alert as a banner at top of page.

Smoothly Unmount

Smoothly unmount Alert upon close.

Custom action

Custom action.

Custom semantic dom styling

You can customize the semantic dom style of Alert by passing objects/functions through classNames and styles.

More types

There are 4 types of Alert: success, info, warning, error.

Closable

To show close button.

Icon

A relevant icon will make information clearer and more friendly.

Loop Banner

Show a loop banner by using with react-text-loop-next or react-fast-marquee.

ErrorBoundary

ErrorBoundary Component for making error handling easier in React.

Custom title alignment

When description is not set, Alert vertically centers the icon, content, action, and close button as a group. Ceebee UI does not switch this default layout to flex-start with token-derived offsets because customized styles may change font size, line height, or action size, making those offsets no longer match the actual rendered styles. When a wrapping title should align those elements with the first line, adjust them with semantic styles.

API

Alert and Alert.ErrorBoundary are exported from @ceebee/ui/client.

Alert

Property	Description	Type	Default	Version
`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
`classNames`	Customize class for each semantic structure inside the component. Supports object or function	`Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>`	`-`	—
`closable`	The config of closable	`boolean \| ClosableType & React.AriaAttributes`	`false`	—
`closeIcon`	(Only supports global configuration) Custom close icon	`ReactNode`	`-`	×
`description`	Additional content of Alert	`ReactNode`	`-`	—
`errorIcon`	(Only supports global configuration) Custom error icon in Alert icon	`ReactNode`	`-`	×
`icon`	Custom icon, effective when showIcon is true	`ReactNode`	`-`	—
`infoIcon`	(Only supports global configuration) Custom info icon in Alert icon	`ReactNode`	`-`	×
`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>`	`-`	—
`successIcon`	(Only supports global configuration) Custom success icon in Alert icon	`ReactNode`	`-`	×
`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`	`-`	×

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 }}`	—