Snackbar

Snackbar content
<div class="snackbar">
  Snackbar content
  <button type="button" class="button button--text button--secondary">Retry</button>
</div>

Position

Snackbar content
<div class="snackbar-container">
  <div class="snackbar">
    Snackbar content
    <button type="button" class="button button--text button--secondary">Retry</button>
  </div>
</div>

Disappear Automatically

<button type="button" id="toggle-snackbar" class="button button--contained button--primary">
  Toggle
</button>
<div id="snackbar-container" class="snackbar-container">
</div>
<script type="text/javascript">
  document.querySelector('#toggle-snackbar').addEventListener('click', function() {
    document.querySelector('#snackbar-container').insertAdjacentHTML('beforeend', `
      <div class="snackbar" data-controller="snackbar" data-snackbar-period="5000">
        Snackbar content
      </div>
    `)
  })
</script>