Link copied!

Snackbar Examples

<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <div class="e-snackbar">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Title Goes Here
          </h3>
          <div>
            Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <div class="e-snackbar e-snackbar-bottom">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Title Goes Here
          </h3>
          <div>
            Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <div class="e-snackbar e-snackbar-autowidth">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Title Goes Here
          </h3>
          <div>
            Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <button class="e-btn e-btn-secondary" id="toggle-sticky">
      Toggle sticky
    </button>
    <div class="e-snackbar e-snackbar-bottom e-snackbar-autowidth" id="snackbar-sticky">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Title Goes Here
          </h3>
          <div>
            Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
document.querySelector('#toggle-sticky').addEventListener('click', function() {
  var snackbar = document.querySelector('#snackbar-sticky');
  var hasSticky = snackbar.classList.contains('e-snackbar-sticky');

  if (hasSticky) {
    snackbar.classList.remove('e-snackbar-sticky');
  } else {
    snackbar.classList.add('e-snackbar-sticky');
  }
});