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.

You have to add .show classes to show components. Use javascript or your favorite framework to add classes.

Single-line snackbar

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 
                
<!-- trigger snackbar -->
<button data-type="snackbar" data-target="#snackbar_xa">Show snackbar</button>

<!-- Snackbar -->
<div id="snackbar_xa" class="[&.show]:opacity-100 [&.show]:bottom-4 z-[60] fixed left-4 right-4 -bottom-full opacity-0 duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] flex flex-row items-center w-5/6 sm:w-80 gap-4 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 data-close="#snackbar_xa" class="flex items-center">
    <span class="material-symbols-outlined">close</span>
  </button>
</div>