cloud.gov pattern library

Button Outline

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"
}