buttons

Overview

Inputs of type submit, button elements and links can all be styled up as buttons.

Generally, use input for form submission, buttons for inline actions/interactivity and links for moving to another page (especially if passing querystring)

Cancel/Reset buttons

Avoid using cancel/reset buttons.

Site navigation ensures users have an easy escape from the form/screen they are on.

Use cancel buttons when cancellation of an operation in progress is genuinely required. For example:

• To stop or abort an AJAX fetch of data
• To stop or abort generation of letters or PDF documents
• To stop or abort a SAP upload

All of these examples would (rather than reset the form) execute code to abort or kill a process, and are a true 'cancel' action.

Example

Input type submit

Button element

 Fetch Names

Links

Start e-learning

WCMS use

MVC.net use

Code

Input type submit

<input class="medium grey " type="submit" name="btnSubmit" id="btnSubmit" value="Submit"/>

Button element

<button class="medium grey " id="btnAction">Fetch Names</button>

 Fetch Names

Links

<a role="button" class="medium grey " href="../Default.aspx" id="btnAction">Start e-learning</a>

Start e-learning

Button styles

Size

Use size to denote Primary, Secondary and Tertiary actions.
Use small also where space is at a premium!

Small  Medium  Large

Color

Use color to denote action types:

• Green for a primary positive action
• Red for a destructive/deletion action
• Orange for a warning/risk action
• White for a benign tertiary action
• Grey for a legitimate cancel action

White  Grey  Black  Green  Blue  Orange  Red

Make full-width buttons

Useful for indicating a sole action - like refreshing some content Ajax-ly.

<a role="button" class="medium green full-width" href="../Default.aspx" id="btnRefresh">Refresh this page</a>

Refresh this page

Button Groups

Download options

•  PDF Academic year 2014-2015
•  .ics (for Outlook, calendar apps)

<div class="dropdown">
  <button class="dropdown-toggle white">Download options<span class="caret half-top"></span></button>
  <ul class="dropdown-menu remove-sides remove-top">
    <li class="remove-top"><a href="http://documents.hants.gov.uk/education/SchoolYear2014-2015FinalVersion.pdf"><i class="icon file-filled" style="display: inline;"></i> PDF Academic year 2014-2015</a></li>
    <li class="remove-bottom"><a href="schoolholidays.ics"><i class="icon calendar" style="display: inline;"></i> .ics (for Outlook, calendar apps)</a></li>
  </ul>
</div>

Version and status

• 1.1
• current version

• Concept
• Alpha
• Beta
• Release