alert

A component that provides outline styling and use the outline icon styling for all variations of the antd alert.

Installation#

npm install @iqmetrix/alert

Props#

It accepts the alert props such as (type, closable, message, showIcon, ...).

 Name  Description  Type  Default  Version 
 afterClose  Called when close animation is finished  () => void  -  3.3.1 
 banner  Whether to show as banner  boolean  false   
 closable  Whether Alert can be closed  boolean  -   
 closeText  Close text to show  string|ReactNode  -   
 description  Additional content of Alert  string|ReactNode  -   
 icon  Custom icon, effective when showIcon is true  ReactNode  -  3.10.0 
 message  Content of Alert  string|ReactNode  -   
 showIcon  Whether to show icon  boolean  true, in banner mode; default is true   
 type  Type of Alert styles, options: successinfowarningerror  string  info, in banner mode default is warning   
 onClose  Callback when Alert is closed  (e: MouseEvent) => void  -   

Examples#

Alert#

import { Alert } from '@iqmetrix/alert';
<!--- Important: we have changed the default behaviour of showIcon to be true; antd's default is false --->
<Alert type="success" message="This is a success with icon" closable />
<Alert type="success" message="This is a success with icon that is not closable" showIcon />
<Alert type="success" message="This is a success without icon" showIcon={false} closable />
<Alert type="error" message="This is an error that is closable" banner closable />
<Alert type="warning" message="This is a alert" description="Here is some text explaining the alert" />

Sources#

Last updated on by Paulo Andrade