Buttons

Open in Figma View all renders 
<button class="btn">primary</button>
<button class="btn btn--secondary">secondary</button>
<button class="btn btn--text">text</button>

Contrast buttons

<button class="btn btn--contrast">primary</button>
<button class="btn btn--secondary btn--contrast">secondary</button> 
<button class="btn btn--text btn--contrast">text</button>

Links styled as buttons

<a href="#" class="btn">primary</a>
<a href="#" class="btn btn--secondary">secondary</a>

Variations and modifiers

Buttons with icons

Buttons can have icons before or after the button name. 

<button class="btn"><span><span class="material-symbols-rounded" aria-hidden="true">border_color</span></span>Button</button>
<button class="btn">Button<span><span class="material-symbols-rounded" aria-hidden="true">border_color</span></span></button>

Button sizes

Buttons can be modified to be small or extra small - buttons are medium by default. Icons will size themselves relative to the button text size. 

<button class="btn btn--small">Button</button>
<button class="btn btn--xsmall">Button</button>

Disabled buttons

Buttons can be disabled. Links that are styled as buttons cannot be disabled. 

<button class="btn" disabled>primary</button>
<button class="btn btn--secondary" disabled>secondary</button>
<button class="btn btn--text" disabled>text</button>