Snackbars

Snackbars provide brief messages at the bottom of the screen. They appear temporarily and shouldn’t interrupt the user experience. Only one snackbar may be displayed at a time.

This is a Snackbar.

CODE

html

<!-- Snackbar -->
<div class="snackbar" id="default-snackbar">This is a Snackbar.</div>

html

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-success" id="show-snackbar">Show Snackbar</button>

html

<script>
document.querySelector('#show-snackbar').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#default-snackbar'));
});
</script>

Snackbar Start

This is a Snackbar

CODE

html

<!-- Snackbar -->
<div class="snackbar snackbar-start" id="snackbar-start-example">This is a Snackbar</div>

html

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-success" id="show-snackbar-start">Show snackbar to the Start</button>

html

<script>
document.querySelector('#show-snackbar-start').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-start-example'));
});
</script>

Snackbar End

This is a Snackbar

CODE

html

<!-- Snackbar -->
<div class="snackbar snackbar-end" id="snackbar-end-example">This is a Snackbar</div>

html

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-success" id="show-snackbar-end">Show snackbar to the End</button>

html

<script>
document.querySelector('#show-snackbar-end').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-end-example'));
});
</script>

Custom visible duration

This is a Snackbar with visible duration of 5000ms.

CODE

html

<!-- Snackbar -->
<div class="snackbar" id="snackbar-5000">This is a Snackbar with visible duration of 5000ms.</div>

html

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-success" id="show-snackbar-5000">Show Snackbar for 5000ms</button>

html

<script>
document.querySelector('#show-snackbar-5000').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-5000'), {
    'visibleDuration': 5000
  });
});
</script>

Dismissible

Close this snackbar

CODE

html

<!-- Snackbar -->
<div class="snackbar" id="snackbar-close">
  Close this snackbar
  <button type="button" class="btn btn-warning border-0 ms-2" data-bs-dismiss="snackbar">
    Dismiss
  </button>
</div>

html

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-success" id="show-snackbar-dismissible">Dismissible snackbar</button>

html

<script>
document.querySelector('#show-snackbar-dismissible').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-close'), {
    'autoClose': false
  });
});
</script>

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS