1. Components
  2. Buttons

Button group

Two buttons, stacked either vertically or horizontally, that offer the user two separate calls to action.

Default button group orc-c-btn-group

Two buttons that offer the user two separate calls to action.

Vertical button group orc-c-btn-group--vertical

Stacks the two buttons vertically and centers them horizontally.

Centered button group orc-c-btn-group--center

Horizontally centers the buttons while keeping them stacked side by side.

  • 

    <div class="orc-c-btn-group ">

  <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
  <!-- end orc-c-btn -->


  <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Secondary Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
  <!-- end orc-c-btn -->




</div>
<!--end orc-c-btn-group-->
    

  • 

    <div class="orc-c-btn-group orc-c-btn-group--vertical">

  <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
  <!-- end orc-c-btn -->


  <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Secondary Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
  <!-- end orc-c-btn -->




</div>
<!--end orc-c-btn-group-->
    

  • 

    <div class="orc-c-btn-group orc-c-btn-group--center">

  <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
  <!-- end orc-c-btn -->


  <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Secondary Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
  <!-- end orc-c-btn -->




</div>
<!--end orc-c-btn-group-->

Usage

When to use

Use a button group to give users a choice: confirm or cancel, learn more or book right away, and so on. It’s the choose-your-own-adventure approach.

When to consider an alternative

If the user has only one course of action, use a button.

Class Name Description 
orc-c-btn-group
Required

Apply to the button group’s containing HTML element. This is set to display: flex on the default button group to place buttons side by side. flex-wrap: wrap is also added so that buttons will wrap when there is not enough space to place buttons side-by-side.

 
orc-c-btn-group--vertical
Modifier

Add to the orc-c-btn-group element to stack buttons on top of each other rather than placing the buttons side-by-side. This also horizontally centers the buttons.

 
orc-c-btn-group--center
Modifier

Add to the orc-c-btn-group element to horizontally center the buttons within the button group’s container.

 
orc-c-btn
Required

Button group button. This is used with a <button> tag when adding some sort of action, unless it is simply linking somewhere else, then an <a> tag is used.