Snackbar

Snackbars provide brief messages about app processes at the bottom of the screen.

Snackbar overview

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Single-line snackbar with action

Single-line snackbar with action

Single-line snackbar with action

Action

Two-line snackbar with action and close affordance

Action 
<!-- snackbar -->
<div x-data="{ show: false }"  x-init="function() {  setTimeout(() => {  this.show = false;  }, 5000);}">
  <button @click="show = ! show" class="btn-tonal relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow-sm bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100">Show Snackbar</button>

  <!-- Snackbar -->
  <div id="snackbar_a"
  x-show="show" style="display:none"
  x-transition:enter="transition-transform duration-[400ms]"
  x-transition:enter-start="translate-y-full"
  x-transition:enter-end="translate-y-0"
  x-transition:leave="transition-transform duration-[400ms]"
  x-transition:leave-start="translate-y-0"
  x-transition:leave-end="translate-y-full"
  class="bottom-4 z-[60] fixed start-4 end-4 duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] flex klsuaonrmcha layhetgsjdcb w-5/6 sm:w-80 spoathnmkles py-3 uajskeiolksb shadow-md rounded text-neutral-50 dark:text-neutral-800 bg-neutral-800 dark:bg-neutral-100">
    <p class="flex flex-grow text-sm tracking-[0.25px]">Single-line snackbar</p>
    <button @click="show = ! show" class="flex layhetgsjdcb">
      <span class="material-symbols-outlined">close</span>
    </button>
  </div>
</div>
Copy