The button 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 component, add the classes usa-button 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 usa-button-primary Use for the most important action the user can take in that section of the page.
action-base usa-button-base Use for standard actions the user can take and options like cancel.
action-cautious usa-button-base Use for actions that are currently disabled for the user.
action-warning usa-button-warning Use for actions that can have critical impact on the user like delete.
action-finish usa-button-finish Use for actions that complete a process for the user.
<button class="action action-warning usa-button usa-button-warning">warning</button>
{% if isDefault %}
<button class="action action-{{ buttonStatus }} usa-button usa-button-{{ buttonStatus }}">{{ buttonText }}</button>
{% endif %}
  "isDefault": true,
  "isOutline": null,
  "isLink": null,
  "buttonStatus": "warning",
  "buttonText": "warning"