​ ​ ​ Buttons - Groups | Crossroads Digital Design Kit ​
  1. UI COMPONENTS
  2. ATOMS
  3. BUTTONS

UI Components / Buttons

Button patterns help solicit action from a user in a clean and consistent manner. These elements are commonly used to submit a form or direct a user's attention towards a primary call-to-action.

Groups

By default, button groups use .btn-default to control their color. This class is interchangeable and extendable when used with any previously defined solid button styles found in the Styles section of this component.

Pills

<div aria-label="..." class="btn-group" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>

Pills Link

<div aria-label="..." class="btn-group btn-group-link" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>

Pills Bar




<div aria-label="..." class="btn-group btn-group-bar" role="group">
  <button class="btn btn-default active" type="button">Default</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-bar" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-bar" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-bar" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>

Pills Bar (Flexbox)




<div aria-label="..." class="btn-group btn-group-bar btn-group-bar-flexbox" role="group">
  <button class="btn btn-default active" type="button">Default</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-bar btn-group-bar-flexbox" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-bar btn-group-bar-flexbox" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-bar btn-group-bar-flexbox" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>

Pills Block

<div aria-label="..." class="btn-group btn-group-block" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>

Pills Group Sizes



<div aria-label="..." class="btn-group btn-group-lg" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>
<br>
<div aria-label="..." class="btn-group" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>
<br>
<div aria-label="..." class="btn-group btn-group-sm" role="group">
  <button class="btn btn-default active" type="button">Default</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
  <button class="btn btn-default" type="button">Label</button>
</div>