Link copied!

Button Examples

<button class="e-btn">
  Button Label
</button>
<button class="e-btn e-btn-dropdown">
  Button for Dropdown
</button>
<e-tooltip content="Settings">
  <button class="e-btn e-btn-onlyicon">
    <e-icon icon="cog"></e-icon>
  </button>
</e-tooltip>
<button class="e-btn e-btn-disabled" disabled>
  Disabled Button
</button>
<button class="e-btn" id="button-loading-has-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
    <e-icon icon="cog"></e-icon>
  </div>
  Button With Icon
</button>

<button class="e-btn" id="button-loading-without-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
  </div>
  Button Without Icon
</button>

<button class="e-btn e-btn-onlyicon" id="button-loading-only-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
    <e-icon icon="cog"></e-icon>
  </div>
</button>

<button class="e-btn e-btn-has_overlay" id="button-loading-overlay">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
  </div>
  Button With Loading Overlay
</button>
Copy Javascript
Copied to clipboard! 
function setLoadingState(buttonElement) {
  buttonElement.addEventListener('click', (event) => {
    const loadingElement = event.currentTarget.querySelector('.e-btn__loading');
    const loading = !loadingElement.classList.contains('e-btn__loading-active');
    event.currentTarget.setAttribute('disabled', loading);
    event.currentTarget.classList.toggle('e-btn-disabled', loading);
    loadingElement.classList.toggle('e-btn__loading-active', loading);
  });
}

setLoadingState(document.getElementById('button-loading-has-icon'));
setLoadingState(document.getElementById('button-loading-without-icon'));
setLoadingState(document.getElementById('button-loading-only-icon'));
setLoadingState(document.getElementById('button-loading-overlay'));
<button class="e-btn e-btn-small">
  Small Button Label
</button>

<button class="e-btn e-btn-large">
  Large Button Label
</button>

<button class="e-btn e-btn-large e-btn-extended">
  Extended Large Button Label
  <small>
    With Second Label
  </small>
</button>
<button class="e-btn e-btn-narrow">
  Narrow Button Label
</button>

<button class="e-btn e-btn-onlyicon e-btn-narrow">
  <e-icon icon="e-caret-right"></e-icon>
</button>
<button class="e-btn e-btn-fullwidth">
  Full-width Button Label
</button>
<button class="e-btn e-btn-primary">
  Primary Button Label
</button>
<button class="e-btn e-btn-borderless">
  Borderless Button Label
</button>
<button class="e-btn e-btn-link">
  Link Button Label
</button>
<button class="e-btn e-btn-active" id="toggleButton">Click to Toggle</button>

<div class="e-margin-l"></div>

<div id="checkboxlike">
  <button class="e-btn" type="submit">
    Button One
  </button>
  <button class="e-btn" type="submit">
    Button Two
  </button>
  <button class="e-btn" type="submit">
    Button Three
  </button>
</div>

<div class="e-margin-l"></div>

<div id="radiolike">
  <button class="e-btn e-btn-active" type="submit">
    Total #
  </button>
  <button class="e-btn" type="submit">
    Rate %
  </button>
</div>
Copy Javascript
Copied to clipboard! 
document.querySelector('#toggleButton').addEventListener('click', (event) => {
  event.target.classList.toggle('e-btn-active');
});

checkboxlikeButtons = document.querySelectorAll("#checkboxlike .e-btn");

radiolikeButtons = document.querySelectorAll("#radiolike .e-btn");

checkboxlikeButtons.forEach( function( button ) {
  button.addEventListener('click', (event) => {
    event.target.classList.toggle('e-btn-active');
  });
});

radiolikeButtons.forEach( function( button ) {
  button.addEventListener('click', (event) => {
    radiolikeButtons.forEach( function( button ) {
      button.classList.remove('e-btn-active');
    });
    event.target.classList.toggle('e-btn-active');
  });
});