1. Docs
  2. Components
  3. Button Group
Buy Now Contact

Button Group

Button groups are used to bunch together buttons with similar actions


<div class="c-btn-group">
    <a class="c-btn c-btn--success" href="#">
        <i class="fa fa-align-left u-mr-xsmall"></i>Left
    </a>
    <a class="c-btn c-btn--success" href="#">
        <i class="fa fa-align-center u-mr-xsmall"></i>Center
    </a>
    <a class="c-btn c-btn--success" href="#">
        <i class="fa fa-align-right u-mr-xsmall"></i>Right
    </a>
</div>

Style Variations

Control the style of button groups by modifying the style of its buttons.


<div class="c-btn-group">
    <a class="c-btn c-btn--info" href="#">
        <i class="fa fa-align-left u-mr-xsmall"></i>Left
    </a>
    <a class="c-btn c-btn--info" href="#">
        <i class="fa fa-align-center u-mr-xsmall"></i>Center
    </a>
    <a class="c-btn c-btn--info" href="#">
        <i class="fa fa-align-right u-mr-xsmall"></i>Right
    </a>
</div>

<div class="c-btn-group">
    <a class="c-btn c-btn--warning" href="#">
        <i class="fa fa-align-left u-mr-xsmall"></i>Left
    </a>
    <a class="c-btn c-btn--warning" href="#">
        <i class="fa fa-align-center u-mr-xsmall"></i>Center
    </a>
    <a class="c-btn c-btn--warning" href="#">
        <i class="fa fa-align-right u-mr-xsmall"></i>Right
    </a>
</div>


Size Variations

Same method used for style variants, we control the style of button groups by modifying the size of its buttons.


<div class="c-btn-group">
    <a class="c-btn c-btn--success c-btn--small" href="#">
        <i class="fa fa-align-left u-mr-xsmall"></i>Left
    </a>
    <a class="c-btn c-btn--success c-btn--small" href="#">
        <i class="fa fa-align-center u-mr-xsmall"></i>Center
    </a>
    <a class="c-btn c-btn--success c-btn--small" href="#">
        <i class="fa fa-align-right u-mr-xsmall"></i>Right
    </a>
</div>

<div class="c-btn-group">
    <a class="c-btn c-btn--success c-btn--large" href="#">
        <i class="fa fa-align-left u-mr-xsmall"></i>Left
    </a>
    <a class="c-btn c-btn--success c-btn--large" href="#">
        <i class="fa fa-align-center u-mr-xsmall"></i>Center
    </a>
    <a class="c-btn c-btn--success c-btn--large" href="#">
        <i class="fa fa-align-right u-mr-xsmall"></i>Right
    </a>
</div>