cloud.gov pattern library

Button

Button

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.

Use

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. 
<!-- Primary -->
<button class="action action-primary usa-button usa-button-primary">primary</button>


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


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


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


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


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


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


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


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


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