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.


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.
<button class="action action-outline action-base">base-outline</button>
{% if isOutline %}
<button class="action action-outline action-{{ buttonStatus }}">{{ buttonText }}</button>
{% endif %}
  "isDefault": null,
  "isOutline": true,
  "isLink": null,
  "buttonStatus": "base",
  "buttonStyle": "outline",
  "buttonText": "base-outline"