Alert

Alert is designed to show feedback messages to user actions.

Usage

Add the .alert class to a container, then add the .alert-content class to the wrapped element which contains the message.

This is the default alert.

<div class="alert">
  <p class="alert-content">This is the default alert.</p>
</div>

Dynamic Control

We can combine toggle behavior to control alerts dynamically. Let’s see the below example.

This alert will be closed automitically after 3s.

<button class="btn btn-primary" data-toggle-for="alert_example">Show the alert</button>
<div class="alert" data-toggle-target="alert_example" data-toggle-auto-deactivate>
  <p class="alert-content">This alert will be closed automitically after 3s.</p>
  <button class="alert-action btn btn-ico btn-dark btn-small" data-toggle>
    <i class="ico ico-cross"></i>
  </button>
</div>

Colors and Backgrounds

We can use color utilities and background utilities to change the appearances of alerts.

This is a primary alert.

This is a secondary alert.

This is a danger alert.

<div class="alert bc-primary">
  <p class="alert-content">This is a primary alert.</p>
  <button class="alert-action btn btn-primary btn-ico btn-small">
    <i class="ico ico-cross"></i>
  </button>
</div>
<div class="alert bc-secondary">
  <p class="alert-content c-dark">This is a secondary alert.</p>
  <button class="alert-action btn btn-secondary btn-ico btn-small">
    <i class="ico ico-cross"></i>
  </button>
</div>
<div class="alert bc-danger">
  <p class="alert-content">This is a danger alert.</p>
  <button class="alert-action btn btn-danger btn-ico btn-small">
    <i class="ico ico-cross"></i>
  </button>
</div>

A More Complex Example

Finally, let’s see a complex example.

Danger!

Poor performance detected. Track the issue.

<div class="alert bc-danger">
  <div class="alert-content">
    <h5 class="c-light">Danger!</h5>
    <p>Poor performance detected. Track <a class="link-light" href="#">the issue</a>.</p>
  </div>
  <div class="alert-action">
    <button class="btn btn-small btn-light">Ignore!</button>
    <button class="btn btn-small btn-light ml-tiny">Log</button>
  </div>
</div>

Sass Variables

Size

$alert-padding-rem: $spacing-small-rem !default

$alert-action-margin-left-rem: $spacing-small-rem !default

Others

$alert-background: $background-color-dark !default

$alert-border-radius: $border-radius-main !default

$alert-box-shadow: null !default

$alert-content-color: $color-inverse-main !default