Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.
You can create buttons using the
button HTML tag accompanied by the
To style an anchor
(a) tag as a button use the
To style an
input as a button use the
button class and define a label by adding a
In most situations we recommend using the semantic
disabled attribute for appropriate HTML elements. If needed there is a companion
disabled utility class.
These buttons are used when we have a time-intensive action on the page. We use them to provide feedback to the user and let them know the action is in progress.
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
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
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.