Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Material Style just now

Hello, world! This is a toast message.

html

<button class="btn btn-success" id="show-toast">Show Toast</button>

html

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="live-toast" class="toast text-bg-dark" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header text-bg-dark">
      <img src="https://materialstyle.github.io/assets/images/MSIconNewColorV2.svg" class="rounded me-2"
           alt="Material Style Icon" width="20">
      <strong class="me-auto">Material Style</strong>
      <small>just now</small>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close">
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Stacking

You can stack toasts by wrapping them in a .toast-container, which will vertically add some spacing.

Material Style just now

See? Just like this.

Material Style just now

Heads up, toasts will stack automatically

CODE

html

<button class="btn btn-success" id="show-stacked-toasts">Show stacked toasts</button>

html

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="stacked-toast-1" class="toast text-bg-light" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header text-bg-light">
      <img src="https://materialstyle.github.io/assets/images/MSIconNewColorV2.svg" 
           class="rounded me-2" alt="Material Style Icon" width="20">
      <strong class="me-auto">Material Style</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div id="stacked-toast-2" class="toast text-bg-dark" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header text-bg-dark">
      <img src="https://materialstyle.github.io/assets/images/MSIconNewColorV2.svg" 
           class="rounded me-2" alt="Material Style Icon" width="20">
      <strong class="me-auto">Material Style</strong>
      <small>just now</small>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Javascript

var toastTrigger = document.getElementById('show-toast')
var toastLiveExample = document.getElementById('live-toast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new materialstyle.Toast(toastLiveExample)

    toast.show()
  })
}

With jQuery

$('#show-toast').on('click', function () {
  $('.toast').toast('show');
});

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS