Button Examples

NOTE: This example has recently been updated. Please provide feedback in issue 316.

The following command and toggle button examples demonstrate the button design pattern.

Similar examples include:

Example

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

Mute

Keyboard Support

Key Function
Enter Activates the button.
Space Activates the button.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
button div, a
  • Identifies the element as a button widget.
  • Accessible name for the button is defined by the text content of the element.
tabindex="0" div, a
  • Includes the element in the tab sequence.
  • Needed on the a element because it does not have a href attribute.
aria-pressed="false" a
  • Identifies the button as a toggle button.
  • Indicates the toggle button is not pressed.
aria-pressed="true" a
  • Identifies the button as a toggle button.
  • Indicates the toggle button is pressed.

Javascript and CSS Source Code

HTML Source Code