Buttons

Buttons are interactive elements that users can click to perform specific actions. They enhance user experience by making interactions intuitive and actions clear. Proper button design and placement are crucial for usability and accessibility.

Overview

Indigo buttons come in various styles to suit your product needs. Choose a button that matches the action hierarchy and fits the context. Buttons vary by three factors:

  • Mode (light or dark)
  • Hierarchy (primary, secondary, or tertiary)
  • Size (medium or small)

The code snippets below show the light and dark mode variations for each hierarchy type. Use light mode buttons by default. Reserve dark mode buttons for dark-colored banners or sections. Like other Indigo components, medium buttons are designed to shrink for smaller viewports.

See the Design and Layout section below for details on button types and their usage.

Design and Layout

Use standard button layouts in Indigo products whenever possible to create a cohesive and consistent user experience.

General Layout

When two buttons are placed next to each other in an interface, use the $indi-space-xl token for the margin.

Button General Layout
Standard Form Layout

USAC forms typically have three buttons for page navigation. While button labels may vary slightly across systems, use all three hierarchy levels to help users distinguish between them. Use primary buttons for high-priority actions, such as moving forward and submitting a form.

Button Standard Form

Priority Level

When choosing a button type (primary, secondary, tertiary), consider all the actions a user may need to take on a page. Use each type of button as follows:

  • Primary
    • Use primary buttons for the highest-priority action that the user must take to complete the task. Limit their use to once per page, but include an additional primary button within modals, filters, or data tables for signaling critical actions.
  • Secondary
    • Use secondary buttons for non-primary actions throughout an interface such as navigating back to a previous page, resetting a page or field, adding or creating an object, and other non-critical actions. You can use multiple secondary buttons on a page.
  • Tertiary
    • Use tertiary buttons in combination with primary and secondary buttons to establish a clear hierarchy of action priority and frequency on a page or section that has three or more possible actions.
    • Tertiary buttons differ from linked text by serving as specific calls to action with optional left-hand side icons. In contrast, links are used inline with text, marked with dashed underlines, and feature optional right-hand side icons.

Sizes

Indigo buttons have been designed to ensure spacing and sizing consistency across all USAC products.

COMPONENT SIZEBREAKPOINTEXAMPLE
Medium Desktop (1024px +)
Medium* Tablet/Mobile (<1024px)
Small** Desktop (1024px +)

*Medium buttons shrink to fit tablet and mobile screens at the 1024 px tablet breakpoint.
**Reserve small buttons for components with limited space, such as filters and data tables. Avoid using small buttons in products frequently accessed on mobile or tablet devices due to their small target area.


Dos and Don'ts

Do
  • Do place primary buttons rightmost in a group of buttons, especially for multiscreen processes.
  • Do prioritize actions and create an importance hierarchy using primary, secondary, and tertiary buttons.
Don't
  • Don't use two primary buttons on a page.
  • Don't display large and small buttons together in the same row.

Accessibility

  • Use the <button> element type when displaying a button. It is a <form> element that enables default browser functionalities (e.g., triggering with space bar/enter keys, hover effects). Additionally, using the button element ensures that screen readers correctly identify the element and its intended action.
  • Although button and <input type="button"> elements do not require this attribute, include a role="button" to 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.

Installation

Props

Events

Slots