Buttons
Demonstration
Code
Buttons in the Opportunity Standard are the same as the Button Component in the U.S. Web Design System (USWDS) and follow similar usage guidelines. A button element without the btn class appears as other links do. It is the same semantically as other buttons and can be used for in-page functionality when space is limited for styled button elements.
Styled buttons may be used as links. However, a consistent type class (unstyled, styled, primary, secondary, or tertiary), and an icon should be used for buttons styled as links. See the link button and external link button for icon references below.
Buttons should be written using the button element. However, if a button is an a element styled with the .btn class and has in-page functionality (such as toggling elements), the role attribute should be set to “button,” and the tabindex attribute should be set to “0.” Refer to the best practices illustrated in the MDN documentation for the “button” role.
If the button is a button element and appears within a form tag, the type attribute should be explicitly set to “button,” “reset,” or “submit.” By default (without the type attribute) button elements are set to the “submit” type in forms.
Buttons may have an icon prefix or postfix next to the label, but they should never be only icons.
Further Button guidance can be found on the USWDS site.
Demonstration
Code
Button Types help designate specific usability patterns. The rules guiding the designation of types are not strict, but here is some guidance on how to use the different types in the Opportunity Standard.
The Styled Button is the first styling level used to designate in-page functionality or linking. It is commonly used when the unstyled button doesn’t have a strong enough presence, and its functionality is not as important as other buttons.
The Primary Button is commonly used for in-page functionality. It should be reserved for the most important action on a page or viewport. Primary buttons may more commonly have an icon prefix to help designate the functionality.
The Secondary Button is commonly used for links and call-to-actions that take users to another page. Examples can be seen in Card and Accordion components. Secondary buttons may more commonly have an icon postfix, as described below.
The Tertiary Button should be reserved for in-page functionality, links, or call-to-actions that are unique or not typically available on the website. For example, if a user’s attention needs to be drawn to a particular link with timely information during an emergency.
Demonstration
Code
If a link appears as a Styled Button, it is recommended to accompany it with an icon such as an arrow, chevron, or external link icon. Link labels should be actionable and unique, and external links should be specified using the external link icon. More information about links can be found on the links page.
Demonstration
Code
If a button triggers an event or in-page functionality, it is recommended to accompany it with an icon prefix that uses a common symbol to convey what it will do. Buttons with an icon but without text labels are discouraged. Other icons can be found on the icons page.
Demonstration
Code
The Small Button is available when the standard button size is too large. It will remain smaller than other standard buttons in all viewports.
Demonstration
Code
The Responsive Button utility will make the button appear as the small size but will grow into the larger size in larger viewports. The breakpoint can be specified using the {{ size }}:btn utility.
| Utility class | Standard size breakpoint |
|---|---|
desktop:btn
|
1112px |
tablet:btn
|
768px |
mobile:btn
|
480px |
small:btn
|
400px |
Demonstration
Code
The Tag Button is a link button used for linking from one piece of categorized content to another category. Clicking on it should typically reveal more content categorized by the label.
Demonstration
Code
Disabled buttons that are disabled appear inactive.
Demonstration
Toggle button target element area. Target element link
Code
The Toggle Button uses the Toggle Utility for expanding and collapsing a single content area. It rotates the downward-facing chevron icon to indicate that the area is expanded or collapsed. It also toggles the appropriate aria-expanded, aria-hidden, and tabindex of the target element and its potentially focusable child elements to hide it from screen readers.