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.

 
1
<button class="button margin-bottom--lv3">Default</button>
2
<button class="button p0 margin-bottom--lv3">Important</button>
3
<button class="button p1 margin-bottom--lv3">Primary Action</button>
4
<button class="button p2 margin-bottom--lv3">Caution</button>
5

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

x
 
1
<button class="button margin-bottom--lv3" disabled>Default</button>
2
<button class="button p0 margin-bottom--lv3" disabled>Important</button>
3
<button class="button p1 margin-bottom--lv3" disabled>Primary Action</button>
4
<button class="button p2 margin-bottom--lv3" disabled>Caution</button>
5

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.

x
 
1
<button class="button button-loading margin-bottom--lv3" disabled>Default</button>
2
<button class="button p0 button-loading margin-bottom--lv3" disabled>Important</button>
3
<button class="button p1 button-loading margin-bottom--lv3" disabled>Primary Action</button>
4
<button class="button p2 button-loading margin-bottom--lv3" disabled>Caution</button>
5

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

x
28
 
1
<div class="button" data-dojo-type="dijit/form/ComboButton"> 
2
  <span><a href="javascript:;">Default</a></span> 
3
  <div data-dojo-type="dijit/DropDownMenu"> 
4
    <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('Mailchimp')}">Eep eep!
5
    </div> 
6
    <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('M-a-i-l-c-h-i-m-p')}">Hoo hoo!
7
    </div> 
8
  </div> 
9
</div>
10
<div class="button p0" data-dojo-type="dijit/form/ComboButton"> 
11
  <span><a href="javascript:;">Important</a></span> 
12
  <div data-dojo-type="dijit/DropDownMenu"> 
13
    <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('Mailchimp')}">Eep eep!
14
    </div> 
15
    <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('M-a-i-l-c-h-i-m-p')}">Hoo hoo!
16
    </div> 
17
  </div> 
18
</div>
19
<div class="button p1" data-dojo-type="dijit/form/ComboButton"> 
20
  <span><a href="javascript:;">Primary Action</a></span> 
21
  <div data-dojo-type="dijit/DropDownMenu"> 
22
    <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('Mailchimp')}">Eep eep!
23
    </div> 
24
    <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('M-a-i-l-c-h-i-m-p')}">Hoo hoo!
25
    </div> 
26
  </div> 
27
</div>
28

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.