Skip to main content Skip to main navigation

Button Groups

Base

<div class="button-group">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
</div>

XXS & Up

<div class="button-group--xxs">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
</div>

XS & Up

<div class="button-group--xs">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
    <button type="button" class="button button--white">Button Four</button>
</div>

SM & Up

<div class="button-group--sm">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
    <button type="button" class="button button--white">Button Four</button>
    <button type="button" class="button button--white">Button Five</button>
</div>

MD & Up

<div class="button-group--md">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
    <button type="button" class="button button--white">Button Four</button>
    <button type="button" class="button button--white">Button Five</button>
    <button type="button" class="button button--white">Button Six</button>
</div>

LG & Up

<div class="button-group--lg">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
    <button type="button" class="button button--white">Button Four</button>
    <button type="button" class="button button--white">Button Five</button>
    <button type="button" class="button button--white">Button Six</button>
    <button type="button" class="button button--white">Button Seven</button>
</div>

XL & Up

<div class="button-group--xl">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
    <button type="button" class="button button--white">Button Four</button>
    <button type="button" class="button button--white">Button Five</button>
    <button type="button" class="button button--white">Button Six</button>
    <button type="button" class="button button--white">Button Seven</button>
    <button type="button" class="button button--white">Button Eight</button>
</div>

XXL & Up

<div class="button-group--xxl">
    <button type="button" class="button button--white">Button One</button>
    <button type="button" class="button button--white">Button Two</button>
    <button type="button" class="button button--white">Button Three</button>
    <button type="button" class="button button--white">Button Four</button>
    <button type="button" class="button button--white">Button Five</button>
    <button type="button" class="button button--white">Button Six</button>
    <button type="button" class="button button--white">Button Seven</button>
    <button type="button" class="button button--white">Button Eight</button>
    <button type="button" class="button button--white">Button Nine</button>
</div>