<button class="usa-button-secondary">Default</button>
<button class="usa-button-secondary usa-button-hover">Hover</button>
<button class="usa-button-secondary usa-button-active">Active</button>
<button class="usa-button-secondary usa-focus">Focus</button>
<button class="usa-button-secondary" 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.9
uswds:
  path: ../../dist
category: secondary
label: Secondary buttons
classes: usa-button-secondary