Suurus

Vaikimisi on kasutusel suur (60px) kõrgusega nupud. Allpool on ära toodud võimalikud alternatiivid, mida vastavalt vajadusele kasutada. Nuppude suurused laienevad kõikidele nuppude tüüpidele.

Suured nupud on pigem mõeldud kasutamiseks ruumirikastes ja lihtsates vaadetes. N: registreerimisvormid.

Väiksemad nupud on mõeldud kasutamiseks mahukates vaadetes, kus on palju informatsiooni. N: tabeli rea lõpus

Suur

Preview 
<button class="button ">
    Button
</button>
 
{
  "content": "Button"
}

Keskmine

Preview 
<button class="button button--medium">
    Button
</button>
 
{
  "content": "Button",
  "button-modifiers": "button--medium"
}

Väike

Preview 
<button class="button button--small">
    Button
</button>
 
{
  "content": "Button",
  "button-modifiers": "button--small"
}

Eriti väike

Preview 
<button class="button button--xsmall">
    Button
</button>
 
{
  "content": "Button",
  "button-modifiers": "button--xsmall"
}