Snackbars

Name: Rence Material
Author: david abalaku

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

Quick Feedback!

Live demonstration

Click to trigger!

Click the button above to trigger a live snackbar. Material 3 snackbars should auto-dismiss after 4-10 seconds.

Real-time feedback!

HTML

<!-- Basic snackbar -->
<div class="toast show align-items-center border-0 text-white bg-dark" role="alert">
  <div class="d-flex">
    <div class="toast-body">File archived successfully.</div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  </div>
</div>

Static Structure

Connection timed out. Showing limited content.