Alerts
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
Basic Buttons
The Basic Alerts are available in 5 states as shown below which can be toggled by using alert and then adding alert---primary,alert---secondary, alert---success,alert---warning and alert---failure to get the respective states of Primary, Secondary, Success, Warning and Failure Alerts.
Implementation
Choose your Alert type and off you go!
<!-- Basic Alerts -->
<div class="alert alert--primary center-children">
<div class="alert__info center-children">
<span class="material-icons md-18">sync</span>
<span class="alert__desc text"><span class="alert__desc__keyword text">Upload
</span>your
photos to your gallery</span>
</div>
<div class="alert__action">
<span class="material-icons">close</span>
</div>
</div>Shaded Alerts
The Basic Alerts are available in 5 states as shown below which can be toggled by using alert and then adding alert---primary---shaded,alert---secondary---shaded, alert---success---shaded,alert---warning---shaded and alert---failure---shaded to get the respective states of Primary, Secondary, Success, Warning and Failure Alerts.
Implementation
We all have different shades don't we so why not for your alerts.
<!-- Basic Shaded Alerts -->
<div class="alert alert--primary--shaded center-children">
<div class="alert__info center-children">
<span class="material-icons md-18">sync</span>
<span class="alert__desc text"><span class="alert__desc__keyword text">Upload
</span>your
photos to your gallery</span>
</div>
<div class="alert__action">
<span class="material-icons">close</span>
</div>
</div>