<div class="bg-base-darkest padding-1" style="max-width: fit-content">
    <button class="usa-button usa-button--outline usa-button--inverse">Default</button>
    <button class="usa-button usa-button--outline usa-button--inverse usa-button--hover">Hover</button>
    <button class="usa-button usa-button--outline usa-button--inverse usa-button--active">Active</button>
    <button class="usa-button usa-button--outline usa-button--inverse usa-focus">Focus</button>
    <button class="usa-button usa-button--outline usa-button--inverse" disabled>Disabled</button><button class="usa-button usa-button--outline usa-button--inverse usa-button--unstyled">Unstyled button</button>
</div>

There are no notes for this item.

{%- if (classes == 'usa-button--outline usa-button--inverse') -%}
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
{% endif -%}

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

{%- if (classes == 'usa-button--outline usa-button--inverse') %}
</div>
{%- endif %}
package:
  name: uswds
  version: 2.0.3
uswds:
  path: ../../dist
category: outline-inverse
label: outline inverse buttons
classes: usa-button--outline usa-button--inverse