4 #buttons Buttons

<a href="#" class="btn [modifier class]">Link button</a>
<a href="http://example.com" class="btn [modifier class]">External link button</a>
<a href="http://example.com" class="btn [modifier class]">External link button with extra long copy to test white-space normal</a>
<button class="btn [modifier class]">Button element</button>
<input type="button" class="btn [modifier class]" value="input[type='button']"/>

4.1 #buttons.btn--condensed Button condensed

Button condensed element.

Example

Download

<a href="#" class="btn btn--condensed file__btn is-internal">Download</a>

4.2 #buttons.btn-block Button block

Button block component.

Example

<button class="btn btn-default btn-block">Button Element</button>
<button class="btn btn-default btn-block">Button Element</button>
<button class="btn btn-default btn-block">Button Element with extra long copy to test white-space normal</button>

4.3 #buttons.btn-collapse Button collapse

Button collapse element.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...

<div> <!-- only required for the style guide -->
  <button class="btn btn-collapse " type="button" data-toggle="collapse" data-target="#collapse-example-1" aria-expanded="false" aria-controls="collapse-example">
    show/hide #collapse-example 1
  </button>
  <div id="collapse-example-1" class="collapse">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
  </div>
</div>

<div> <!-- only required for the style guide -->
  <button class="btn btn-collapse collapsed" type="button" data-toggle="collapse" data-target="#collapse-example-2" aria-expanded="false" aria-controls="collapse-example">
    show/hide #collapse-example 2<i class="icon icon--blue-dark icon--down"></i>
  </button>
  <div id="collapse-example-2" class="collapse">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
  </div>
</div>

4.4 #buttons.btn-search Button search

Button search component.

Example

Button Search

<a href="#" class="btn btn-search">Button Search</a>

4.5 #buttons.group Button group

Custom bootstrap button group

Examples

Button primary Button default Button default with extra long copy to test white-space normal Button default

.btn-group-row-two

Two column button block

Button primary Button default Button default with extra long copy to test white-space normal Button default

<div class="btn-group [modifier class]">
  <a href="#" class="btn btn-primary">Button primary</a>
  <a href="#" class="btn btn-default">Button default</a>
  <a href="#" class="btn btn-default">Button default with extra long copy to test white-space normal</a>
  <a href="#" class="btn btn-default">Button default</a>
</div>

4.6 #buttons.spinner Button spinner

Custom bootstrap buttons styling with spinner.

Examples

.btn-default

Button default

.btn-primary

Button primary

.btn-secondary

Button secondary

.btn--margin-top

Button modifier, margin on top

.btn--margin-right

Button modifier, margin on right

<button class="btn [modifier class]" disabled="disabled">Button element<i class="icon icon--spinner icon--spacing-2-xs is-spinning"></i></button>