Button Examples
.e-btn
<button class="e-btn">
Button Label
</button>.e-btn-dropdown
<button class="e-btn e-btn-dropdown">
Button for Dropdown
</button>.e-btn-onlyicon
<e-tooltip content="Settings">
<button class="e-btn e-btn-onlyicon">
<e-icon icon="cog"></e-icon>
</button>
</e-tooltip>.e-btn-disabled
<button class="e-btn e-btn-disabled" disabled>
Disabled Button
</button>e-busy-indicator > .e-btn
<e-busy-indicator active="true" inline="true" size="small">
<button class="e-btn" id="button-loading-has-icon">
<e-icon icon="cog"></e-icon>
Button With Icon
</button>
</e-busy-indicator>
<e-busy-indicator active="true" inline="true" size="small">
<button class="e-btn" id="button-loading-without-icon">
Button Without Icon
</button>
</e-busy-indicator>
<e-busy-indicator active="true" inline="true" size="small">
<button class="e-btn e-btn-onlyicon" id="button-loading-only-icon">
<e-icon icon="cog"></e-icon>
</button>
</e-busy-indicator>.e-btn-small, .e-btn-large, .e-btn-extended
<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>.e-btn-narrow
<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>.e-btn-fullwidth
<button class="e-btn e-btn-fullwidth">
Full-width Button Label
</button>.e-btn-primary
<button class="e-btn e-btn-primary">
Primary Button Label
</button>.e-btn-borderless
<button class="e-btn e-btn-borderless">
Borderless Button Label
</button>.e-btn-link
<button class="e-btn e-btn-link">
Link Button Label
</button>Toggle .e-btn-active with JavaScript
<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>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');
});
});