Mesa Design System White Logo

A button is an element in web design that represents an action or operation that the user can perform on a platform. Buttons are typically used for actions such as submitting a form, navigating to another page, confirming a decision, or initiating a process. They are visually designed to draw attention to the user to encourage them to interact with it.

Overview

Keyboard interactions

Buttons can be reached by Tab and selected with Space or Enter.

 

Design recommendations

Labeling

When buttons do not have a persistently displayed label, they must be annotated with a label that will be exposed on hover or focus.

Buttons should display a visible focus state when users tab to them.

Development considerations

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.