Alert is a component used to display important messages or notifications to the user. It can be customized with different types, icons, and actions.
Alert is a component used to display important messages or notifications to the user. It can be customized with different types, icons, and actions.
import { Alert } from '@lobehub/ui';| 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 | -- |