element

Buttons

USAJOBS alters the disabled button and adds a secondary button style.

Design Complete

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

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.