Elixir Docs | Alert

Alerts

Alerts communicate short, important information to the user, without interrupting their flow.

Elixir offers the following range of alerts - Simple Alerts, and Alerts with Close Button.

Simple alerts

To generate a simple alert use the base class alert. There are 5 types of themed alerts - Primary, Secondary, Success, Warning, and Error alerts.

To generate a themed simple alert, use any of the following theme class along with the base class- alert-primary, alert-secondary, alert-success, alert-warning, and alert-error.

This is a primary alert

This is an secondary alert

This is a success alert

This is a warning alert

This is an error alert

Paste the code below to use simple alerts with different variations.

<div class="alert alert-primary m-1 py-0-5 px-0-75">
    <p class="alert-text">
        This is a primary alert
    </p>
</div>

<div class="alert alert-secondary m-1 py-0-5 px-0-75">
    <p class="alert-text">
        This is an secondary alert
    </p>
</div>

<div class="alert alert-success m-1 py-0-5 px-0-75">
    <p class="alert-text">
        <span class="icon icon-success">
            <i class="fas fa-check-circle"></i>
        </span>
        This is a success alert
    </p>
</div>

<div class="alert alert-warning m-1 py-0-5 px-0-75">
    <p class="alert-text">
        <span class="icon icon-warning">
            <i class="fas fa-info-circle"></i>
        </span>
        This is a warning alert
    </p>
</div>

<div class="alert alert-error m-1 py-0-5 px-0-75">
    <p class="alert-text">
        <span class="icon icon-bug">
            <i class="fas fa-bug"></i>
        </span>
        This is an error alert
    </p>
</div>

Simple alerts with Close Button

These are simple alerts with a close icon which removes the alert when you click it.

To generate an alert with close icon, add the supporting class alert-close to the simple alert and within the alert, a button container with class icon-close.

Primary alert with close icon

Secondary alert with close icon

Success alert with close icon

Warning alert with close icon

Error alert with close icon

Paste the code below to use alerts with close icon.

<div class="alert alert-close alert-primary m-1 py-0-5 px-0-75">
    <p class="alert-text">
        Primary alert with close icon
    </p>
    <button class="btn btn-icon icon-close">
        <span class="icon">
            <i class="fas fa-times"></i>
        </span>
    </button>
</div>
                            
<div class="alert alert-close alert-secondary m-1 py-0-5 px-0-75">
    <p class="alert-text">
        Secondary alert with close icon
    </p>
    <button class="btn btn-icon icon-close">
        <span class="icon">
            <i class="fas fa-times"></i>
        </span>
    </button>
</div>
                            
<div class="alert alert-close alert-success m-1 py-0-5 px-0-75">
    <p class="alert-text">
        <span class="icon icon-success">
            <i class="fas fa-check-circle"></i>
        </span>
        Success alert with close icon
    </p>
    <button class="btn btn-icon icon-close">
        <span class="icon">
            <i class="fas fa-times"></i>
        </span>
    </button>
</div>
                            
<div class="alert alert-close alert-warning m-1 py-0-5 px-0-75">
    <p class="alert-text">
        <span class="icon icon-warning">
            <i class="fas fa-info-circle"></i>
        </span>
        Warning alert with close icon
    </p>
    <button class="btn btn-icon icon-close">
        <span class="icon">
            <i class="fas fa-times"></i>
        </span>
    </button>
</div>

<div class="alert alert-close alert-error m-1 py-0-5 px-0-75">
    <p class="alert-text">
        <span class="icon icon-bug">
            <i class="fas fa-bug"></i>
        </span>
        Error alert with close icon
    </p>
    <button class="btn btn-icon icon-close">
        <span class="icon">
            <i class="fas fa-times"></i>
        </span>
    </button>
</div>

Paste the code below for the javascript logic to close alerts when the close button is clicked.

/* Get reference to the alert close button */
const closeIcon = document.querySelector('.alert .icon-close');

/* Attaching event listener to listen for alert close icon click */
closeIcon.addEventListener('click', closeAlert);

/* handler called when the close button is clicked */
function closeAlert(e) {
    const btnClose = e.target;
    const alert = btnClose.parentElement;
    alert.style.display = 'none';
}