Button group
Button groups consist of related Buttons, a group of actions related to one task.
Default
<div class="e-buttongroup">
<button class="e-btn" type="reset">
Default
</button>
<button class="e-btn e-btn-secondary" type="submit">
Secondary
</button>
<button class="e-btn e-btn-primary" type="submit">
Primary
</button>
</div><div class="e-buttongroup">
<button class="e-btn" type="reset">
Default
</button>
<button class="e-btn e-btn-secondary" type="submit">
Secondary
</button>
<button class="e-btn e-btn-primary" type="submit">
Primary
</button>
</div>JavaScript
Variations
Sticky
<div class="e-buttongroup e-buttongroup-sticky">
<button class="e-btn" type="reset">
Default
</button>
<button class="e-btn e-btn-secondary" type="submit">
Secondary
</button>
<button class="e-btn e-btn-primary" type="submit">
Primary
</button>
</div><div class="e-buttongroup e-buttongroup-sticky">
<button class="e-btn" type="reset">
Default
</button>
<button class="e-btn e-btn-secondary" type="submit">
Secondary
</button>
<button class="e-btn e-btn-primary" type="submit">
Primary
</button>
</div>JavaScript
Flexbox
<div class="e-buttongroup e-buttongroup-flex">
<button class="e-btn e-btn-primary" type="submit">
Primary button
</button>
<button class="e-btn e-btn-secondary" type="submit">
Secondary
</button>
<button class="e-btn" type="submit">
Secondary
</button>
<button class="e-btn" type="submit">
Secondary
</button>
<button class="e-btn" type="submit">
Secondary
</button>
<button class="e-btn" type="reset">
Default button
</button>
</div><div class="e-buttongroup e-buttongroup-flex">
<button class="e-btn e-btn-primary" type="submit">
Primary button
</button>
<button class="e-btn e-btn-secondary" type="submit">
Secondary
</button>
<button class="e-btn" type="submit">
Secondary
</button>
<button class="e-btn" type="submit">
Secondary
</button>
<button class="e-btn" type="submit">
Secondary
</button>
<button class="e-btn" type="reset">
Default button
</button>
</div>JavaScript