Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Buttons

Priority

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 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.

Disabled

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

Loading

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.

Combo button

Default
Eep eep!
Hoo hoo!
Important
Eep eep!
Hoo hoo!
Primary Action
Eep eep!
Hoo hoo!

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.

Group

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.