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="tcu-button _primary | button primary">
        First Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Second Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Third Button
    </a>
</div>

<h2>Stacked</h2>
<div class="button-group stacked">
    <a href="" class="tcu-button _primary | button primary">
        First Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Second Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Third Button
    </a>
</div>

<h2>Stacked for small screens</h2>
<div class="button-group stacked-for-small">
    <a href="" class="tcu-button _primary | button primary">
        First Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Second Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Third Button
    </a>
</div>

<h2>Even-width Group</h2>
<div class="button-group expanded">
    <a href="" class="tcu-button _primary | button primary">
        First Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Second Button
    </a>
    <a href="" class="tcu-button _primary | button primary">
        Third Button
    </a>
</div>