Button Outline

The button outline component is used when you want the user to take an action. Buttons should be used for changing the state of a page or transforming data.

Use

To use the button outline component, add the classes usa-button usa-button-outline action to a <button> element.

In addition, add any of the following classes to the button to style the button based on status.

Class Description
action-primary Use for the most important action the user can take in that section of the page.
action-base Use for standard actions the user can take and options like cancel.
action-cautious Use for actions that are currently disabled for the user.
action-warning Use for actions that can have critical impact on the user like delete.
action-finish Use for actions that complete a process for the user.
<!-- Primary Outline -->
<button class="action action-outline action-primary">primary-outline</button>

<!-- Base Outline -->
<button class="action action-outline action-base">base-outline</button>

<!-- Disabled Outline -->
<button class="action action-outline action-cautious">disabled-outline</button>

<!-- Warning Outline -->
<button class="action action-outline action-warning">warning-outline</button>

<!-- Finish Outline -->
<button class="action action-outline action-finish">finish-outline</button>

{% if isOutline %}
<button class="action action-outline action-{{ buttonStatus }}">{{ buttonText }}</button>
{% endif %}
/* Primary Outline */
{
  "isDefault": null,
  "isOutline": true,
  "isLink": null,
  "buttonStatus": "primary",
  "buttonStyle": "outline",
  "buttonText": "primary-outline"
}

/* Base Outline */
{
  "isDefault": null,
  "isOutline": true,
  "isLink": null,
  "buttonStatus": "base",
  "buttonStyle": "outline",
  "buttonText": "base-outline"
}

/* Disabled Outline */
{
  "isDefault": null,
  "isOutline": true,
  "isLink": null,
  "buttonStatus": "cautious",
  "buttonStyle": "outline",
  "buttonText": "disabled-outline"
}

/* Warning Outline */
{
  "isDefault": null,
  "isOutline": true,
  "isLink": null,
  "buttonStatus": "warning",
  "buttonStyle": "outline",
  "buttonText": "warning-outline"
}

/* Finish Outline */
{
  "isDefault": null,
  "isOutline": true,
  "isLink": null,
  "buttonStatus": "finish",
  "buttonStyle": "outline",
  "buttonText": "finish-outline"
}