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