Buttons & Links

Links

Default

<a href="#"> Link (without class) </a><br>
<a class="u-link" href="#"> Link (with class) </a>

Plain

<a class="u-link--plain" href="#"> Plain </a>

Reverse

The reverse link has no background color so it can be easily used inside elements with any background color.

Reverse

<span style="background-color: #333">
  <a class="u-link--reverse" href="#"> Reverse </a>
</span>

Buttons

Primary

<button class="btn btn-primary" type="button">
  primary
</button>

<button class="btn btn-primary" type="button" disabled>
  primary - disabled
</button>

Secondary

<button class="btn btn-secondary" type="button">
  secondary
</button>

<button class="btn btn-secondary" type="button" disabled>
  secondary - disabled
</button>

Tertiary

<button class="btn btn-tertiary" type="button">
  tertiary
</button>

<button class="btn btn-tertiary" type="button" disabled>
  tertiary - disabled
</button>

Reverse

<div class="c-card s-primary-light">
  <div class="c-card__content">
    <button class="btn btn-reverse" type="button">
      reverse
    </button>

    <button class="btn btn-reverse" type="button" disabled>
      reverse - disabled
    </button>
  </div>
</div>

Full-width

<button class="btn btn-primary btn-block" type="button">
  full-width primary
</button>

Example Usage Notes

mouse over to see the :hover state
click and hold to see the :active state

Implementation Notes

Combine specific button classes with the .btn class as shown in the example snippets.
The .btn-block class can be applied to any button to produce a full-width button.

Compact Buttons

Primary Compact

<button class="btn btn-primary btn-sm" type="button">
  primary
</button>

<button class="btn btn-primary btn-sm" type="button" disabled>
  primary - disabled
</button>

Secondary Compact

<button class="btn btn-secondary btn-sm" type="button">
  secondary
</button>

<button class="btn btn-secondary btn-sm" type="button" disabled>
  secondary - disabled
</button>

Tertiary Compact

<button class="btn btn-tertiary btn-sm" type="button">
  tertiary
</button>

<button class="btn btn-tertiary btn-sm" type="button" disabled>
  tertiary - disabled
</button>

Icon Compact

<p>
<button class="btn btn-icon--sm" type="button" aria-label="Options">
  <span class="flexicon flexicon-ellipsis"></span>
</button>

<button class="btn btn-icon--sm" type="button" aria-label="Options" disabled>
  <span class="flexicon flexicon-ellipsis"></span>
</button>

<button class="btn btn-icon--sm" type="button" aria-label="Forward">
  <span class="flexicon flexicon-chevron--large"></span>
</button>

<button class="btn btn-icon--sm" type="button" aria-label="Forward" disabled>
  <span class="flexicon flexicon-chevron--large"></span>
</button>
</p>

Segmented Buttons

Small Segmented Buttons

You can use either an a or a button or both. Add the active class to the button that is active. This component won't change when different segments are clicked. There is a similar control that is based on a radio button that can be used with forms.

First Link

Red Green Blue

<div class="c-container--canvas">
  <div class="c-segment c-segment-sm">
    <a class="c-segment__btn active">First Link</a>
    <button class="c-segment__btn">Second Link</button>
  </div>
  <br><br>
  <div class="c-segment c-segment-sm">
    <a class="c-segment__btn">Red</a>
    <a class="c-segment__btn active">Green</a>
    <a class="c-segment__btn">Blue</a>
  </div>
</div>

Carousel Button

<div class="c-container--canvas">

  <div id="carouselButton" class="c-carousel-button"
      data-items='[{"text": "Within", "value": "or"}, {"text": "Not Within", "value": "not"}, {"text": "Intersection", "value": "and"}]'
      data-active="or"
      data-input-id="myFormInput"
      data-input-name="myform[field][operator]">
  </div>

</div>

<script>
  $(function() {
    new CarouselButton('#carouselButton');
  })
</script>

You can also customize the button style. Note the button stays the same with no matter how long the text.

<div class="c-container--canvas">

  <div id="customizedCarouselButton" class="c-carousel-button"
      data-items='[{"text": "Within", "value": "or"}, {"text": "Not Within", "value": "not"}, {"text": "Intersection", "value": "and"}, {"text": "Mythical Donut Hole", "value": "donut"}]'
      data-active="or"
      data-input-id="userChoiceInput"
      data-input-name="user_choice"
      data-button-style="padding: 12px 24px; font-weight: bold; min-width: 200px">
  </div>

</div>

<script>
  $(function() {
    var carousel = new CarouselButton('#customizedCarouselButton');
  })
</script>