Alert is a component used to display important messages or notifications to the user. It can be customized with different types, icons, and actions.
Default
Alert Title
Extra
Alert Title
Show Details
APIs
Name | Description | Type | Default |
---|---|---|---|
classNames | -- | {alert?:string;container?:string} | -- |
colorfulText | -- | boolean | -- |
extra | -- | ReactNode | -- |
extraDefaultExpand | -- | boolean | -- |
extraIsolate | -- | boolean | -- |
text | -- | {detail?:string} | -- |
variant | -- | "ghost"|"block"|"default"|"pure" | -- |
type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | "error"|"success"|"info"|"warning" | -- |
closable | Whether Alert can be closed | {closeIcon?:ReactNode;disabled?:boolean}|boolean | -- |
closeText | -- | ReactNode | -- |
message | Content of Alert | ReactNode | -- |
description | Additional content of Alert | ReactNode | -- |
onClose | Callback when close Alert | (event:E)=>void | -- |
afterClose | Trigger when animation ending of Alert | ()=>void | -- |
showIcon | Whether to show icon | boolean | -- |
role | https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute | string | -- |
style | -- | {} | -- |
prefixCls | -- | string | -- |
className | -- | string | -- |
rootClassName | -- | string | -- |
banner | -- | boolean | -- |
icon | -- | ReactNode | -- |
closeIcon | -- | ReactNode | -- |
action | -- | ReactNode | -- |
onMouseEnter | -- | (event:E)=>void | -- |
onMouseLeave | -- | (event:E)=>void | -- |
onClick | -- | (event:E)=>void | -- |
id | -- | string | -- |