Cornerstone

Button Group

A button group evenly spaces out a grouping of buttons.

For stacked buttons on all screen sizes, add the stacked class to the .tcu-button-group container.

For stacked buttons on small screens only, add the stacked-for-small class to the .tcu-button-group container.

For even width buttons with no spacing between them, add the expanded class to the .tcu-button-group container.

<h2>Default</h2>
<div class="button-group">

    <a href="#" class="button primary">
        First Button
    </a>

    <a href="#" class="button primary">
        Second Button
    </a>

    <a href="#" class="button primary">
        Third Button
    </a>
</div>

<h2>Stacked</h2>
<div class="button-group stacked">

    <a href="#" class="button primary">
        First Button
    </a>

    <a href="#" class="button primary">
        Second Button
    </a>

    <a href="#" class="button primary">
        Third Button
    </a>
</div>

<h2>Stacked for small screens</h2>
<div class="button-group stacked-for-small">

    <a href="#" class="button primary">
        First Button
    </a>

    <a href="#" class="button primary">
        Second Button
    </a>

    <a href="#" class="button primary">
        Third Button
    </a>
</div>

<h2>Even-width Group</h2>
<div class="button-group expanded">

    <a href="#" class="button primary">
        First Button
    </a>

    <a href="#" class="button primary">
        Second Button
    </a>

    <a href="#" class="button primary">
        Third Button
    </a>
</div>