Toast Notifications

<div class="c-button-group">
  <button class="c-button c-button--default" onclick="toggle('#default')">
    Toggle default message
  </button>
  <button class="c-button c-button--default" onclick="toggle('#success')">
    Toggle success message
  </button>
  <button class="c-button c-button--default" onclick="toggle('#error')">
    Toggle error message
  </button>
</div>

<div class="c-toast" id="default">
  <div class="c-toast__text">Default toast message</div>
  <button class="c-button c-button--link c-button--icon c-toast__close">
    <i class="icon icon-close c-button__icon"></i>
  </button>
</div>

<div class="c-toast c-toast--success" id="success">
  <i class="c-toast__icon icon icon-check"></i>
  <div class="c-toast__text">Success toast message</div>
  <button class="c-button c-button--link c-button--icon c-toast__close">
    <i class="icon icon-close c-button__icon"></i>
  </button>
</div>

<div class="c-toast c-toast--error" id="error">
  <i class="c-toast__icon icon icon-warning"></i>
  <div class="c-toast__text">Error toast message</div>
  <button class="c-button c-button--link c-button--icon c-toast__close">
    <i class="icon icon-close c-button__icon"></i>
  </button>
</div>

<script>
  const toggle = (selector) => {
    const toast = document.querySelector(selector)
    toast.classList.toggle('c-toast--visible')
  }
</script>