Button

Component library

How to use this component

Buttons initiate actions, with labels that clearly describe what will happen. Place them near relevant elements and align them left, right, or center. Use primary buttons for main actions and secondary and tertiary buttons for less common ones.

A button is used to trigger an action or event and should indicate what will happen when clicked by a user.

Button component

View video transcript for Button component.

Best practices

Use buttons sparingly, as multiple buttons may create confusion for users.
Button text should clearly identify the destination of the link.
External links and document/file links should open in a new window.

Don't use generic text, such as "Click here".
Don't create your own buttons, or use images as buttons.
Don't use overly long or complicated text for button labels.
Don't include punctuation in buttons.

Button types

Primary

Use primary buttons for high emphasis to a key action. These should be used for the most important action on a page or within a container.

Secondary buttons
Use secondary buttons for less important actions, or a medium emphasis.

Tertiary buttons

Use tertiary buttons for low emphasis actions. They're often grouped with other tertiary buttons.

Placement

Place buttons near text that provides additional context for why users select the button link.
Ensure proper padding and spacing for readability.

Multi-button

Primary button draws emphasis on the desired behavior.

Configuration options

Spacing

If space is needed below the button, select the desired margin bottom from the dropdown.

Alignment

Left-aligned: Best used in forms and full page content.
Center-aligned: Best used in smaller columns or as promotional content.
Right-aligned: Best used in small windows, like modals and pop-ups. The primary button should be located on the right.

Accessibility

Use semantic elements for buttons to improve accessibility for screen readers.
Ensure buttons have visible focus states to indicate keyboard navigation for users who cannot use a mouse.
Ensure adequate spacing between buttons.
If using multiple buttons on a page, each should have a unique label.
For mobile, ensure buttons have a minimum height of 42px.
Button states should include:
- default
- disabled
- error
- focused
- hover
- pressed

Keyboard Navigation

Keys	Action
Tab	Focus
Space/enter	Triggers the button

Web Coordinator checklist

Use desciptive and concise text for Button label.
Use the "Browse" option to enter the URL field, instead of pasting an internal link.
Verify external links are set to "open in a new window".