Buttons

Overview

This button library has three types of buttons – primary, secondary, and tertiary. Use the button that matches the priority of the action(s) you need to communicate. This helps the user visually distinguish between actions.

The buttons are designed to ensure consistency across all USAC products.

Primary

Use primary buttons for the highest-priority action that the user must do to complete the task. Primary buttons should only be used once per page, though an additional primary button can appear within modals, popovers, or alerts when needed to signal critical actions.

Only use the on-dark-background variation when the button is placed on dark backgrounds (e.g., on popovers or modal dialogs).

Secondary

Use secondary buttons for most non-primary actions throughout an interface such as back, reset, adding or creating an object, or other non-critical actions. See examples below.

Tertiary

Use tertiary buttons when there are 3 or more possible actions on the page and there’s clearly a prioritization of those actions (primary, secondary, and tertiary). Tertiary buttons are most often used to create a clear hierarchy of priority and importance of actions.

Also use tertiary buttons within rows of data tables. (Do not use small primary or secondary buttons).

See links for in-text linking.

Small

Use small buttons in settings with limited space, like toolbars, filters, and advanced search components (often placed above data tables).

Use Guidelines

Use When

• Signifying important actions on a page.
• Confirming or submitting information entered into a form.
• Cancelling an action.
• Resetting a form or dataset.
• Closing a container or section.
• Opening a popover menu.
• Moving forward or backward through a workflow or form.
• Creating an object within a group.

Don't Use When

• Displaying a collection of links to sections. Use link instead.
• Linking to an external site. Use link instead.

Dos and Don’ts

• Do place a primary button rightmost in a group of buttons.
• Do prioritize actions and create an importance hierarchy using primary, secondary, and tertiary buttons

• Don't use two primary buttons on a page.

• Don't display large and small buttons together in the same row.

• Don't place a primary button on the left of a group of buttons.

Editorial

• Label a button with a verb (“Submit”) or verb-phrase (“Submit Form”).
• Strive for short, succinct button labels that clearly describe an action.
• Avoid lengthy button labels that wrap.

Accessibility

• When displaying a button, use the <button> element type. A <button> is a <form> element which enables all of the default browser functionality (e.g., using space bar/enter keys to trigger, hover, etc). Also, the button element will allow screen readers to understand exactly what the element is and what it’s supposed to do.
• Include a role="button" attribute, although <button> and <input type="button"> elements do not require this attribute. This declaration can make any HTML element appear as a button to a screen reader.
  • A <div role=”button”> or <span role=”button”> without a tabindex=”” attribute will not receive a tabbed focus state.
  • A <div role=”button”> or <span role=”button”> cannot be triggered from a keyboard without JavaScript.