Buttons

Elements

Buttons can be made from

• Button elements (<button>),
• Links (<a>), and
• form submit buttons (<input type="submit" />).

<a href="#" class="button">
    I am an &lt;a&gt;
</a>

<button class="button">
    I am a &lt;button&gt;
</button>

<input type="submit" class="button"
       value="I am an &lt;input&gt;" />

Button Sizes

Buttons grow proportionately to their font size. If you want a larger button, you can combine the button class with one of the font-size classes.

(Note that anything past the medium font size should be justified to both your resident designer and common sense. )

<button class="button-secondary font-xs">
    Tiny-sized
</button>

<button class="button-secondary">
    Standard-sized
</button>

<button class="button-secondary font-xxl">
    CLICK ME!
</button>

When used in standard forms (within form elements), buttons will be sized slightly differently to go along with the height of an input field of the same font size.

Please note that this works only for button elements (<button>) and submit buttons (<input type="submit" />).

Button Types

There are three predefined button types that you can choose from. The two more flashy ones (button-primary and button-secondary) are generally for “calls to action” to guide the user, while the standard white button (button) can be used for regular interactive elements.

Please note that there should generally only ever be one primary button on a page to highlight the most important call to action.

<button class="button-primary">
    Primary button
</button>

<button class="button-secondary">
    Secondary button
</button>

<button class="button">
    Regular button
</button>

Disabling Buttons

You can make buttons look disabled to show the user that they are temporarily inactive by appending the disabled class.

<button class="button-primary disabled">Inactive button</button>
<button class="button-secondary disabled">Inactive button</button>
<button class="button disabled">Inactive button</button>

In HTML5, submit buttons, like other form inputs, can also be semantically disabled through the disabled attribute, making them unclickable and showing their inactive states.

<input type="submit" class="button"
       value="Inactive submit button" disabled />

Buttons with Icons

Buttons can be decorated with icons using the FontAwesome type face integrated in the Core style set. This allows you to build buttons with a wide range of contextual icons on demand without the need to have a specific button designed and implemented.

<a href="#" class="button">
  <span class="fa fa-angle-left"></span>
  Go back
</a>

<a href="#" class="button">
  <span class="fa fa-comments"></span>
  Leave a comment
</a>

Please note that icons are only available on buttons that are based on <a> or <button> elements.
<input> buttons (as in form submits) cannot have icons due to technological limitations of the <input> element.

Button Widths

By default, buttons will be just as wide as they need to be for the text to fit. However, if they directly follow blocky elements, it may be desirable to have them aligned on both sides with the preceding element.

In such cases, you can use the width classes as you would on any other element. The button will then be inflated to the specified size, while the text will stay centered.

<input type="text" class="input-text margin-bottom-xs one-whole" placeholder="Some input" />
<button class="button-primary one-whole">
    Wiiide button
</button>

State-bound Buttons

Depending on how layouts behave on different viewports, you may want a link to appear as a normal text link in some states, and as a button in others.

You can achieve this by adding one of the standard state prefixes (palm-, lap-, desk-) to the respective button class (e.g. palm-button-primary).

<a href="#" class="palm-button-secondary">
    Button on palm-sized devices
</a>

<a href="#" class="lap-button-secondary">
    Button on lap-sized devices
</a>

<a href="#" class="palm-button lap-button-secondary">
    Button on palm-sized and lap-sized devices
</a>