element
Buttons
USAJOBS alters the disabled button and adds a secondary button style.
USAJOBS extends the U.S. Web Design Standards buttons with an alteration to the disabled button and an additional secondary button style.
Disabled Button
Revised disabled button
Disabled button on Button Bar background variation
Why these deviations exist
- Reducing the opacity of disabled buttons helped the affordance in cases where a button was employed as part of a large component (e.g. Document).
- If the default disabled button is on a gray background it does not have enough contrast and affordance for being disabled.
Usability
When to use
- Use the default style for all disabled buttons.
Secondary Button
Alert variation
Alt - Gray variation
Usability
When to use
- The alert secondary button is intended for destructive actions or actions that will take the user outside of USAJOBS.
- The gray button retains a button that had been in the U.S. Design System but was dropped. It's still in use on the site and we'll continue to support use when deemed appropriate.
Links as buttons
Alert variation
Usability
When to use
- Use the
.usa-button-primary
class to style a link like a button.
Button select
A call-to-action button that reveals a select menu and then executes an action.
Usability
When to use
- For micro-interactions where the user must select from a list and the act of making a selection takes immediate action.