Button widgets are used to perform discrete, atomic actions, such as submitting form data, playing/pausing a video, or to expand/collapse sections of content. Buttons differ from links, in that links are used to navigate from one page to another, or to fetch data (such as downloading a document), whereas buttons are only used to trigger an action.

How it looks

image of button example

(Note: This example would use the btn and btnGreen classes to invoke the green styling.)

The code

Buttons should be coded with the <button> element. Only this element provides the correct behaviors in user agents (browsers) without additional scripting.

<button>Button</button>
 

For all users, regardless of impairment, clearly indicating the purpose of a button through appropriate button text is vital. This helps users to decide whether or not they actually want to use a button. For sighted users, meaningful button text is extremely useful where there are several buttons on a page (particularly if the page contains extensive text).

Avoid terms such as “More” or “Click Here” for button text. Make sure that the button text is succinct, but makes sense out of context.

If you are using a font icon or unicode character, make sure an auxiliary text label is provided using aria-label. In the following example, the &times; (cross) character is used to represent a close button, hence the label:

<button aria-label="close">&times;</button>