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

States

Active Solid States

Buttons must be programmatically written to take an .active class when the button is active.

<button class="btn btn-blue active" type="button">Blue Primary</button>
<button class="btn btn-gray active" type="button">Gray Primary</button>
<button class="btn btn-gray-light active" type="button">Gray Light Primary</button>
<p class="bg-charcoal soft-quarter">
  <button class="btn btn-white active" type="button">White Primary</button>
</p>

Active Outline States

<button class="btn btn-blue btn-outline active" type="button">Blue Secondary</button>
<button class="btn btn-gray btn-outline active" type="button">Gray Secondary</button>
<button class="btn btn-gray-light btn-outline active" type="button">Gray Light Secondary</button>
<p class="bg-charcoal soft-quarter">
  <button class="btn btn-white btn-outline active" type="button">White Secondary</button>
</p>

Disabled Solid Color Options

<button class="btn btn-blue disabled" type="button">Blue Primary</button>
<button class="btn btn-blue disabled" type="button">Cyan Primary</button>
<button class="btn btn-gray disabled" type="button">Gray Primary</button>
<button class="btn btn-gray-light disabled" type="button">Gray Light Primary</button>
<p class="bg-charcoal soft-quarter">
  <button class="btn btn-white disabled" type="button">White Primary</button>
</p>

Disabled Outline Color Options

<button class="btn btn-blue btn-outline disabled" type="button">Blue Secondary</button>
<button class="btn btn-blue btn-outline disabled" type="button">Cyan Secondary</button>
<button class="btn btn-gray btn-outline disabled" type="button">Gray Secondary</button>
<button class="btn btn-gray-light btn-outline disabled" type="button">Gray Light Secondary</button>
<p class="bg-charcoal soft-quarter">
  <button class="btn btn-white btn-outline disabled" type="button">White Secondary</button>
</p>

Disabled Link Style Options

<button class="btn btn-link disabled" type="button">Link Primary</button>
<button class="btn btn-link secondary disabled" type="button">Link Secondary</button>