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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow 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 lsdfdfsdafd pdskdmsdnjw w-5/6 sm:w-80 pajskalamsn py-3 px-4 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 pdskdmsdnjw">
      <span class="material-symbols-outlined">close</span>
    </button>
  </div>
</div>