Buttons

Button Buttons

Note: The base .button class has base styling associated with it. You're probably looking for one of the colored buttons below.

<button type="button" class="button">Button</button>

<button type="button" class="button button--link">Button Link</button>

Link Buttons

Note: The base .button class has base styling associated with it. You're probably looking for one of the colored buttons below.

Button

<a href="#" class="button">Button</a>

Button Link

<a href="#" class="button button--link">Button Link</a>

Disabled Buttons

<button type="button" class="button" disabled>Button</button>

<button type="button" class="button button--link" disabled>Button Link</button>

Buttons Sizes

Non-Wrapping Buttons

Buttons wrap their text by default to prevent horizontal scrolling. If you wish to keep a button's text on one line, just add a white-space--nowrap class to prevent wrapping. You can also turn wrapping back on by using a white-space--normal class.