Button

• src
• buttons
• button.scss

Class list

Description

Use the .button class on button, a, or input element in order to receive button styling.

Example

<button class="button">button</button>
<a class="button">button</a>
<input type="button" class="button" value="button">

Wide button

Using the .wide class on a .button sets its display to block and its width to 100%

<button class="button wide">wide button</button>

Disabled button

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

Theme classes

The theme classes Sandbox provides set some extra pseudo class styling specifically for buttons.

<button class="button primary">primary</button>
<button class="button info">info</button>
<button class="button caution">caution</button>
<button class="button danger">danger</button>
<button class="button light">light</button>
<button class="button dark">dark</button>

Font size scaling

Use the font-size utility classes to adjust the size of a button.

<button class="button h6">button</button>
<button class="button h5">button</button>
<button class="button">button</button>
<button class="button h3">button</button>
<button class="button h2">button</button>
<button class="button h1">button</button>