Snackbars

Display an important message globally.

Baseline Snackbar

Make a baseline snackbar with help of baseline-snackbar class. Click on the button below for the demo. Have a look at the code for reference.

        
  <button
    id="baseline-btn"
    class="btn btn-solid-primary showSnackbar-btn"
    data-button="baseline"
  >
    Show Snackbar
  </button>
  <div id="baseline-snackbar" class="snackbar baseline-snackbar">
    <span class="snackbar-text"
      >Can't send photo. Retry in 5 seconds.</span
    >
    <div class="snackbar-actions">
      <button class="snackbar-btn">Retry</button>
      <span
        id="baseline-snackbar-close"
        class="material-icons snackbar-icon"
        data-snackbar="baseline"
      >
        close
      </span>
    </div>
  </div>
        
      

Leading Snackbar

Make a leading snackbar with help of leading-snackbar class. Click on the button below for the demo. Have a look at the code for reference.

        
  <button
    id="leading-btn"
    class="btn btn-solid-primary showSnackbar-btn"
    data-button="leading"
  >
    Show Snackbar
  </button>
  <div id="leading-snackbar" class="snackbar leading-snackbar">
    <span class="snackbar-text"> Your photo has been archived. </span>
    <div class="snackbar-actions">
      <button class="snackbar-btn">Undo</button>
      <span
        id="leading-snackbar-close"
        class="material-icons snackbar-icon"
        data-snackbar="leading"
      >
        close
      </span>
    </div>
  </div>
        
      

Stacked Snackbar

Make a stacked snackbar with help of stacked-snackbar class. Click on the button below for the demo. Have a look at the code for reference.

        
  <button
    id="stacked-btn"
    class="btn btn-solid-primary showSnackbar-btn"
    data-button="stacked"
  >
    Show Snackbar
  </button>
  <div id="stacked-snackbar" class="snackbar stacked-snackbar">
    <span class="snackbar-text"
      >This item already has the label "travel". You can add a new
      label.</span
    >
    <div class="snackbar-actions">
      <button class="snackbar-btn">Add a new label</button>
      <span
        id="stacked-snackbar-close"
        class="material-icons snackbar-icon"
        data-snackbar="stacked"
      >
        close
      </span>
    </div>
  </div>