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