Button

When to use

• Important actions. Use buttons for the most important actions your users will want to complete on your page.

When to consider something else 

• Linking between pages: regular links suffice usually.
• If the action is less popular or less important. Less popular or less important actions may be visually styled as links.

Usability guidance

• Use primary buttons for actions that go a next step.
• Use subtle, basic, or outline buttons for actions that happen on the current page.
• Give an important action a distinctive style. Style the button most users should select using primary buttons. This should distinguishes it from other buttons on the page.
• Make sure buttons look interactable. Use color variations to distinguish static, hover, and active states.
• Avoid using too many buttons on a page. Consider priorities and style accordingly; or break up into smaller tasks.
• Use sentence-case capitalization for button labels.
• Keep button text short. Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example, Download, View, or Sign up).
• Lead with a verb. Make the first word of the button’s text a verb. For example, instead of Interlibrary loan request, label the button Request interlibrary loan.
• Icons can be helpful. Consider adding an icon to signal specific, common, well-known actions (Download, Open in a new window, etc).

Accessibility guidance 

• Buttons should display a visible focus state when users tab to them.
• Use standard markup. Avoid using <div> or <img> tags to create buttons. Screen readers don’t automatically know either is a usable button.
• Screen readers handle buttons and links differently. When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.