You can create buttons using the button HTML tag accompanied by the button class.

To style an anchor (a) tag as a button use the button class.

To style an input as a button use the button class and define a label by adding a value attribute.

In most situations we recommend using the semantic disabled attribute for appropriate HTML elements. If needed there is a companion disabled utility class.

Dynamically add the button-loading class to the button after the first press. After the request is completed, remove the class.

It's advisable to toggle the disabled attribute as well.

There are situations when buttons are grouped for a related function. For example, in paging controls for previous-next buttons.

Wrap two or more buttons using the button-group class.

Adding the regular class to style like the example. A dark style is also available.

If the button has no accessible name or uses an icon, include an aria-label attribute.

Combo buttons are preferred when more than one action is associated with a button. The primary action is visible and available on the button itself, while the secondary actions are accessed through the drop-down menu.

The button's color is based on our button priority. The chosen color should reflect the importance of a user's action relative to other buttons on the page.

Combo buttons are created using Dijit's dijit/form/ComboButton and secondary actions are defined inside dijit/DropDownMenu using dijit/MenuItems.

This component is most easily implemented by programmatically instantiating mojo/widgets/ButtonGroup and passing a template string.

Be mindful of accessibility and tap sizes. Use semantic markup and keep in mind this pattern works best with 3 to 5 items.