# Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

## Bootstrap Simple Alert

Bootstrap provides an easy way to create predefined alert messages. Alerts are created with the `.alert` class, followed by one of the four contextual classes `.alert-success`, `.alert-info`, `.alert-warning` or `.alert-danger`. Use `.alert-link` utility to quickly provide matching colored links within any alert.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Spyware detected on your system.
Oh snap! Change a few things up and try submitting again.

## Bootstrap Alert with Close Button

Bootstrap Alerts are available with an optional close button. Add `.alert-dismissible` class to parent div and `.close` class to a link or a button element.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Spyware detected on your system.
Oh snap! Change a few things up and try submitting again.

## Propeller Alert

Unlike other Propeller components Alert component is independent of Bootstrap HTML structure.

In Marterial Design language alert is known as Snackbar and Toast.

To specify the position of alert component use data-positionX (x-axis positioning with `left`, `right`, and `center` as values.) and data-positionY (y-axis positioning with `top` and `bottom` as values.) attributes. To customize the visibility time of alert on screen use data-duration attribute with a numeric value.

Alert Top

Alert Bottom

## Propeller Alert with Action

This type of Alert comes with an action which is to be performed on the alert message. Along with Propeller Alert HTML use additional attributes - data-action (with `true` and `false` value) and data-action-text (with `user defined` value).

Alert Top

Alert Bottom

## Propeller Alerts with basic notification types

These are simple Propeller Alerts with an aditioinal attribute - data-type with predefined four values - `alert-success`, `alert-info`, `alert-warning` or `alert-danger`.

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Alert. The table lists the available classes and their effects.

HTML Attributes | Effect | Value
--- | --- | ---
`data-positionX` | Defines the position of Alert horizontally. | left, right, center
`data-positionY` | Defines the position of Alert vertically. | top, bottom
`data-type` | Defines the type of Data in the alert box. | information, warning, success, error
`data-effect` | Defines the type of animation while showing the alert. | fadeInUp, fadeInDown
`data-action` | Required when your alert demands user to perform some action. | true, false
`data-action-text` | Defines the action that needs to be performed. | Close, Refresh, Ok, etc.
`data-duration` | Customize the visibility time of alert on the screen. | Numeric value

## Events

Bootstrap's alert plugin exposes a few events for hooking into alert functionality. See here for more documentation on this.

Event Type | Description
--- | ---
`close.bs.alert` | This event fires immediately when the `close` instance method is called.
`closed.bs.alert` | This event is fired when the alert has been closed (will wait for CSS transitions to complete).