Chicago Design System (v1.6.7)

Buttons: Gray 

<button class="usa-button-gray">Default</button>
<button class="usa-button-gray usa-button-hover">Hover</button>
<button class="usa-button-gray usa-button-active">Active</button>
<button class="usa-button-gray usa-focus">Focus</button>
<button class="usa-button-gray" disabled>Disabled</button>

There are no notes for this item.

{%- if (classes == 'usa-button-secondary-inverse') -%}
<div class="dark-bg">
{% endif -%}

<button class="{{ classes }}">Default</button>
{% if (category != 'disabled') and (category != 'big') -%}
<button class="{{ classes }} usa-button-hover">Hover</button>
<button class="{{ classes }} usa-button-active">Active</button>
<button class="{{ classes }} usa-focus">Focus</button>
<button class="{{ classes }}" disabled>Disabled</button>
{%- endif -%}

{%- if (classes == 'usa-button-secondary-inverse') %}
</div>

<style scoped>
  .dark-bg {
    background-color: #212121;
  }
</style>
{%- endif %}
 
package:
  name: uswds
  version: 1.6.7
uswds:
  path: ../../dist
category: alternate
label: Gray buttons
classes: usa-button-gray