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
- 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>
Links
- <a role="button" class="medium grey " href="../Default.aspx" id="btnAction">Start e-learning</a>
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.
- <a role="button" class="medium green full-width" href="../Default.aspx" id="btnRefresh">Refresh this page</a>
Button Groups
- <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="https://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