Baseline Toast

<button
  class="btn btn-brand btn-accent showToast-btn"
  id="baseline-btn"
  data-button="baseline"
>
  Show Toast
</button>

<div id="baseline-toast" class="toast baseline-toast">
  <span class="toast-text">Message not sent. Retry in 5 seconds.</span>
  <div class="toast-actions">
    <button class="toast-btn">Retry</button>
    <span
      id="baseline-toast-close"
      class="material-icons toast-icon"
      data-toast="baseline"
    >
      close
    </span>
  </div>
</div>
      

Leading Toast

<button
  class="btn btn-brand btn-accent showToast-btn"
  id="leading-btn"
  data-button="leading"
>
  Show Toast
</button>

<div id="leading-toast" class="toast leading-toast">
  <span class="toast-text">Saved as a draft.</span>
  <div class="toast-actions">
    <button class="toast-btn">Undo</button>
    <span
      id="leading-toast-close"
      class="material-icons toast-icon"
      data-toast="leading"
    >
      close
    </span>
  </div>
</div>
      

Stacked Toast

<button
  class="btn btn-brand btn-accent showToast-btn"
  id="stacked-btn"
  data-button="stacked"
>
  Show Toast
</button>

<div id="stacked-toast" class="toast stacked-toast">
  <span class="toast-text"
    >This item already has the label "travel". You can add a new
    label.</span
  >
  <div class="toast-actions">
    <button class="toast-btn">Add a new label</button>
    <span
      id="stacked-toast-close"
      class="material-icons toast-icon"
      data-toast="stacked"
    >
      close
    </span>
  </div>
</div>