<ons-page>
  <ons-toolbar>
    <div class="center">Toasts</div>
  </ons-toolbar>

  <p style="text-align: center">
    <ons-button onclick="toggleToast('danger')">Danger</ons-button>
    <ons-button onclick="toggleToast('success')">Success</ons-button>
  </p>
</ons-page>

<ons-toast modifier="success thick">
  Success!
</ons-toast>

<ons-toast modifier="danger thick" animation="fall">
  Danger danger<button onclick="toggleToast('danger')">OK</button>
</ons-toast>
/* danger */  
.toast--danger {
  left: auto;
  background-color: hsl(348, 100%, 61%);
}

/* success */
.toast--success {
  left: 0;
  margin-left: auto;
  right: 0;
  margin-right: auto;
  width: 150px;
  border-radius: 30px;
  background-color: hsl(141, 71%, 48%);
}
.toast--success__message {
  margin: 0;
  text-align: center;
}

/* thick */
.toast--thick__message,
.toast--thick__button {
  font-weight: 700;
}

function toggleToast(modifier) {
  document
    .querySelector('ons-toast[modifier~=' + modifier)
    .toggle();
}
Run Pen

External CSS

  1. https://unpkg.com/onsenui/css/onsenui.css
  2. https://unpkg.com/onsenui/css/onsen-css-components.css

External JavaScript

  1. https://unpkg.com/onsenui/js/onsenui.js