<button class="">Default</button>

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

<style scoped>
    .dark-bg {
        background-color: #212121;
    }
</style>

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>
  {% if (category == 'primary') -%}
    <button class="usa-button-disabled" disabled>Disabled (deprecated)</button>
  {%- elif (category == 'secondary') -%}
    <button class="usa-button-secondary-disabled" disabled>Disabled (deprecated)</button>
  {%- elif (category == 'secondary-inverse') -%}
    <button class="usa-button-secondary-inverse-disabled" disabled>Disabled (deprecated)</button>
  {%- endif %}
{%- endif %}

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

<style scoped>
  .dark-bg {
    background-color: #212121;
  }
</style>
package:
  name: uswds
  version: 1.4.1
uswds:
  path: ../../dist