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

Links

Start e-learning

WCMS use
MVC.net use
Code

Input type submit

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

Button element

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

Links

  1. <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!

   

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

           

Make full-width buttons

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

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

Refresh this page

Button Groups

  1. <div class="dropdown">
  2. <button class="dropdown-toggle white">Download options<span class="caret half-top"></span></button>
  3. <ul class="dropdown-menu remove-sides remove-top">
  4. <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>
  5. <li class="remove-bottom"><a href="schoolholidays.ics"><i class="icon calendar" style="display: inline;"></i> .ics (for Outlook, calendar apps)</a></li>
  6. </ul>
  7. </div>
Version and status
  • 1.1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release