Our pattern library used to build the Mailchimp application.
Buttons are categorized by importance and can be applied to a variety of html nodes. Each variation has intention and should be used sparingly.
Default Important Primary Action CautionYou 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.
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.
Default Important Primary Action CautionDynamically 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/MenuItem s.
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.
Looks like your browser is blocking pop-up windows.
Learn how to enable them.