​ ​ ​ Buttons - Dropdowns | 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.

Dropdowns

Barring the first example, all other code examples on this page are strictly to illustrate the effect each .btn-* class has on the input element.

Button Dropdown

The dropdown functionality illustrated below was enabled by including data-toggle="dropdown" to a link or button selector within the dropdown. This is a Bootstrap implementation and documentation can be found here.

onclick="return false" has been added to all link tag selectors to prevent the page from refreshing. This line of code is not necessarily needed for your project.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="dropdown" role="presentation">
  <button class="btn btn-blue dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Blue Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
  <ul class="crds-list dropdown-menu">
    <li>
      <a href="#" onclick="return false">Action</a>
    </li>
    <li>
      <a href="#" onclick="return false">Another action</a>
    </li>
    <li>
      <a href="#" onclick="return false">Something else here</a>
    </li>
  </ul>
</div>
<div class="dropdown dropdown-block" role="presentation">
  <button class="btn btn-blue dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Blue Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
  <ul class="crds-list dropdown-menu">
    <li>
      <a href="#" onclick="return false">Action</a>
    </li>
    <li>
      <a href="#" onclick="return false">Another action</a>
    </li>
    <li>
      <a href="#" onclick="return false">Something else here</a>
    </li>
  </ul>
</div>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Solid Color Options

Use the .btn-* classes on any element with a .btn class to change that button element's color.

For obvious reasons, the .btn-white style button works best on a dark background. All of the following white button examples have been given a wrapper with a dark background (and some minor padding for aesthetic reasons).

<div class="dropdown">
  <button class="btn btn-blue dropdown-toggle" type="button">
    Blue Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-blue dropdown-toggle" type="button">
    Cyan Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray dropdown-toggle" type="button">
    Gray Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray-light dropdown-toggle" type="button">
    Gray Light Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="block bg-charcoal soft-quarter">
  <div class="dropdown">
    <button class="btn btn-white dropdown-toggle" type="button">
      White Primary Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>

Disabled Solid Color Options

<div class="dropdown">
  <button class="btn btn-blue disabled dropdown-toggle" type="button">
    Blue Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-blue disabled dropdown-toggle" type="button">
    Cyan Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray disabled dropdown-toggle" type="button">
    Gray Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray-light disabled dropdown-toggle" type="button">
    Gray Light Primary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="block bg-charcoal soft-quarter">
  <div class="dropdown">
    <button class="btn btn-white disabled dropdown-toggle" type="button">
      White Primary Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>

Outline Color Options

Adding a class of .btn-outline to any .btn element will invert the text and background colors, creating an outline effect.

<div class="dropdown">
  <button class="btn btn-blue btn-outline dropdown-toggle" type="button">
    Blue Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-blue btn-outline dropdown-toggle" type="button">
    Cyan Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray btn-outline dropdown-toggle" type="button">
    Gray Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray-light btn-outline dropdown-toggle" type="button">
    Gray Light Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="block bg-charcoal soft-quarter">
  <div class="dropdown">
    <button class="btn btn-white btn-outline dropdown-toggle" type="button">
      White Secondary Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>

Disabled Outline Color Options

<div class="dropdown">
  <button class="btn btn-blue btn-outline disabled dropdown-toggle" type="button">
    Blue Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-blue btn-outline disabled dropdown-toggle" type="button">
    Cyan Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray btn-outline disabled dropdown-toggle" type="button">
    Gray Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="dropdown">
  <button class="btn btn-gray-light btn-outline disabled dropdown-toggle" type="button">
    Gray Light Secondary Dropdown
    <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
      <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
    </svg>
  </button>
</div>
<div class="block bg-charcoal soft-quarter">
  <div class="dropdown">
    <button class="btn btn-white btn-outline disabled dropdown-toggle" type="button">
      White Secondary Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>

Sizes

Adding .btn-lg or .btn-sm will increase or decrease your button element.

<div class="block">
  <div class="dropdown">
    <button class="btn btn-blue btn-lg dropdown-toggle" type="button">
      Large Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
  <div class="dropdown">
    <button class="btn btn-blue btn-outline btn-lg dropdown-toggle" type="button">
      Large Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>
<div class="block">
  <div class="dropdown">
    <button class="btn btn-blue dropdown-toggle" type="button">
      Default Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
  <div class="dropdown">
    <button class="btn btn-blue btn-outline dropdown-toggle" type="button">
      Default Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>
<div class="block">
  <div class="dropdown">
    <button class="btn btn-blue btn-sm dropdown-toggle" type="button">
      Small Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
  <div class="dropdown">
    <button class="btn btn-blue btn-outline btn-sm dropdown-toggle" type="button">
      Small Dropdown
      <svg class="icon icon-1 pull-right push-left" viewBox="0 0 256 256">
        <use xlink:href="/assets/svgs/icons.svg#chevron-down" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
    </button>
  </div>
</div>