Alert

Flexible Alert Component

The Alert component can be used by first import it from the library using the code below

import { Alert } from '@wigxel/react-components/lib/alert';

The above code allows the Alert component to be used on that particular page. The Alert component requires the message or children props to begin

<Alert message="You're account has been created successfully" />

The message or children property accepts a string or node containing the message to be displayed.

/** Passed as message prop **/
<Alert message='hello Wigxel Alert component'/>


/** Passed as children prop **/
<Alert>Hello Wigxel Alert component</Alert>

You are only required to use either the message or children prop.

Below are the other props the Alert component can take.

Alert.propTypes = {
	// The icon to be displayed
	icon: t.node,
	
	// shows or hides the modal 
	type: t.string,
	
	// toggles the box-shadow 
	shadow: t.bool,
	
	// function that gets called when the close button is closed.
	onClose: t.func,
	
	// The text to be displayed within the Alert
	message: t.string,
	
	// Optional, when message prop is provide
	children: t.node,
}

Type Prop

The type property accepts a string of predefined value of dark, light ,info, success, warningand danger.

The default type value is info

<Alert
  type="info"
  message="Info Alert" />

<Alert
  type="dark"
  message="Dark Alert" />

<Alert
  type="light"
  message="Light Alert" />

<Alert
  type="success"
  message="Success Alert" />
  
<Alert
  type="warning"
  message="Warning Alert" />
  
<Alert
  type="danger"
  message="Danger Alert" />

The icon property accepts an image which can be used as the header of the alert component.

Shadow Prop

The Shadow accepts a boolean. It adds a shadow style to the Alert component.

<Alert
  type="success"
  message="Success Alert" 
  shadow={true}/>

The Shadow props adds a shadow that matches the color of the Type prop.

onClose prop

Collapsible prop

Icon props