• Components
  • Buttons

Sizes

Usage notes

Buttons can be different sizes, and have combinations of sizes. Generally, the primary button should be the largest button on the page.

  
<!-- Wide-->
<a href="#" class="btn btn--primary btn--wide">Wide</a>

<!-- Narrow-->
<a href="#" class="btn btn--secondary btn--narrow">Narrow</a>

<!-- Thin-->
<a href="#" class="btn btn--secondary btn--thin">Thin</a>

<!-- Wide & small-->
<a href="#" class="btn btn--secondary btn--wide btn--small">Wide and small</a>