> For the complete documentation index, see [llms.txt](https://wigxel.gitbook.io/react-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wigxel.gitbook.io/react-components/components/alert.md).

# Alert

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

```javascript
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

```jsx
<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.

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


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

{% hint style="warning" %}
You are only required to use either the **message** or **children** prop.&#x20;
{% endhint %}

Below are the other props the `Alert` component can take.

```jsx
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`, `warning`and `danger`.&#x20;

{% hint style="info" %}
The default **type** value is **info**
{% endhint %}

```jsx
<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.

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

{% hint style="warning" %}
The `Shadow` props adds a shadow that matches the color of the `Type` prop.
{% endhint %}

### onClose prop

### Collapsible prop

### Icon props