Language selection

Search

Buttons

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use buttons to create a call to action that entices the user to submit content from a form. Also, use buttons also take users to a webpage that provides additional information.

Design and coding

Basic use

Default

Use the button classes on <a>, <button>, or <input> elements to create visual consistency. The browser shows certain elements as a button. However, there is often a lack of visual consistency for each button type. Each browser can have a different button default appearance.

Appearance
Default:
Styled:
Correct use

Compliance point(s):

  • Use the <button> element whenever possible to ensure matching cross-browser rendering
    • There is a bug in Firefox <30 that makes it impossible to set the line-height in <input>-based buttons
    • These buttons therefore have uneven heights in Firefox
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Default button:
<button type="submit">Button</button>
<input type="button" value="Input" />
<input type="submit" value="Submit" />
<a class="btn btn-default" href="#"</a>

// Styled button:
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Submit" />
<a class="btn btn-default" href="#" role="button">Link</a>

Enhanced use

Colours

Use to add colours to buttons. Colours signify such things as a link to warning information (caution button) to a link to the next learning module (success button).

Appearance
Correct use

Compliance point(s):

  • Use buttons as follows:
    • Default: Standard button
    • Primary: Provides extra visual weight and identifies the primary action in a set of buttons
    • Success: Indicates a successful or positive action that advances the user to a next phase or module
    • Info: Contextual button for informational alert messages
    • Warning: Indicates to take caution with this action
    • Danger: Indicates a dangerous or potentially negative action
    • Link: De-emphasize a button by making it look like a link, while maintaining button behavior
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Default:
<button type="button" class="btn btn-default">Default</button>

// Primary:
<button type="button" class="btn btn-primary">Primary</button>

// Success:
<button type="button" class="btn btn-success">Success</button>

// Info:
<button type="button" class="btn btn-info">Info</button>

// Warning:
<button type="button" class="btn btn-warning">Warning</button>

// Danger:
<button type="button" class="btn btn-danger">Danger</button>

// Link:
<button type="button" class="btn btn-link">Link</button>

Sizing

Use to increase or decrease the size of a button.

Appearance
Correct use

Compliance point(s):

  • Default sizing: Use for a typical button
  • Extra small and small buttons: Use when several buttons are contained within a toolbar and space is at a premium. The button size reduces to maximize the amount of buttons that appear in a single row
  • Large button: Use when the button needs additional prominence on the page. Since the default buttons already create prominence and a call to action, there is limited value/need to increase their size
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Large button:
<button type="button" class="btn btn-default btn-lg">Large button</button>

// Default button:
<button type="button" class="btn btn-default">Default button</button>

// Small button:
<button type="button" class="btn btn-default btn-sm">Small button</button>

// Extra small button:
<button type="button" class="btn btn-default btn-xs">Extra small button</button>

Full width

Use to create block level buttons (those that span the full width of a parent).

Appearance
Correct use

Compliance point(s):

  • Use .btn-block when the button is within a small container
    • This button spans the full width of the parent container, and is fully justified within the available space
  • Test the button in all resolutions
    • In a responsive design, full width buttons may not look good in all resolutions
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Block level button:
<button type="button" class="btn btn-default btn-block">Block level button</button>

Active state

Use .active with <button> and <a> elements if you need to have a button look active at all times (usually for display or instructional purposes on fake buttons or links). When a user presses a button it appears in the active state (with an inset shadow, and darker background and border). For <button> and <a> elements, this is auto-styled in CSS via :active.

 

Appearance
Correct use

Compliance point(s):

  • Add .active to <a> or <button> elements to indicate that a link or button is in an active state
  • Use when the link or button target matches the current page address
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Active button:
<button type="button" class="btn btn-default active">Button</button>

// Active link:
<a href="#" class="btn btn-default active" role="button">Link</a>

Disabled state

Use to disable buttons and links (not clickable), and give them a faded appearance.

Appearance
Correct use

Compliance point(s):

  • Use disabled="disabled" to disable a button
  • Add the .disabled class to an <a> element to indicate that a link is disabled
  • Remove the href attribute to fully disable links, as the class only changes the appearance of the <a> tag, not the functionality
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Disabled button:
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

// Disabled link:
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Groups

Use to group a series of buttons together on a single line with the button group.

Appearance

Default:

Large:

Small:

Extra-small:

Justified (links):

Left Middle Right

Justified (buttons):

Correct use

Compliance point(s):

  • Use to make a single toolbar of buttons
  • Wrap a series of buttons with .btn within a .btn-group
  • Add .btn-group-* to the .btn-group rather than applying button sizing classes to every button in a group
  • Wrap a series of buttons with .btn within .btn-group btn-group-justified − to use justified button groups with <a> elements
  • Wrap each button within a button group to use justified button groups with <button> elements. Most browsers don't properly apply our CSS for justification to <button> elements. Since we support button dropdowns, we can workaround that
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Default:
<div class="btn-group">
  <button class="btn btn-default" type="button">...</button>...
</div>

// Large button group:
<div class="btn-group btn-group-lg">...
</div>

//Small button group:
<div class="btn-group btn-group-sm">...
</div>

// Extra small button group:
<div class="btn-group btn-group-xs">...
</div>

// Justified links:
<div class="btn-group btn-group-justified">
   <a class="btn btn-default" role="button">...</a>...
</div>

// Justified button group:
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">...</button>
  </div>...
</div>

Toolbars

Use to display multiple groups of buttons together on a single line.

Appearance
Correct use

Compliance point(s):

  • Use to make a toolbar that contains multiple groups of buttons
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Multiple button groups:
<ul class="btn-toolbar list-inline" role="toolbar">
  <li class="btn-group">
   <button type="button" class="btn btn-default">1</button>
	...
  </li>
  <li class="btn-group">
   <button type="button" class="btn btn-default">4</button>
	...
  </li>
  <li class="btn-group">
   <button type="button" class="btn btn-default">6</button>
  </li>
</ul>

Button types

Use the correct button text for the correct user interaction.

Don't focus on the button colours/styling

The below buttons are pre-styled for guidance and demonstration purposes.

As long as all button compliance points are adhered to, the button can have different colours, sizes, groupings and so forth than what is shown.

Button types and examples
Button type Example Compliance point(s)
Primary action button
For example:
  • Typical layout:
    • Order by frequency of use from left to right, and most frequent to least frequent (left-most button = primary action button)
    • Is the most actionable button on a page
    • Is triggered when the Enter key is pressed in a form field
  • Exception:
    • Use for pagination − the "Next" button (which is on the right), is the primary action button
Sign in
  • Use to log into an application
  • Determine location of "Sign in" as part of the Information Architecture of the site
Register
  • Use to register for a service or program
  • Do not combine with "Sign in" for first time users
Sign out
  • Use to log out of an application
  • Ensure the "Sign out" button appears on every page at the top right hand corner, for all applications that require sign in
Previous / Next
  • Next:
    • Use to bring the user to the next page, or to the next step in the process
    • Is often the primary action button
  • Previous:
    • Use to bring the user to the previous page or step
    • Make it the left-most button
    • Do not use if there is no page to return to (for example, home page or confirmation pages)
For more options, refer to: Pagination
Submit
  • Submit:
    • Use to send data
  • Certify submit:
    • Use to obtain certification of data being submitted for processing due to a financial implication, or legal requirement
    • Place a non-defaulted checkbox labeled "I certify that XXX", where the X's describe what is being certified
      • The wording must be reviewed by the business OPI, and likely by the legal department
    • Place a "Submit" (or other context specific label) button below the checkbox
      • If the certification checkbox is not checked and "Submit" is pressed, display an error that indicates the checkbox needs selecting in order to to have a successful submission
    • Label the checkbox label with the word "Certify" if a related paper form also uses the word "Certify"
    • Do not use the word "Certify" as a button label
  • Confirm submit:
    • Use to confirm that data entered is accurate before submission for processing
    • Use when there are minimal financial implications and no legal requirements that need to be satisfied (as opposed to certification)
    • Place a non-defaulted checkbox labeled "I confirm that XXX", where the X's describe what is being confirmed
      • The wording must be reviewed by the business OPI
    • Place a "Submit" (or other context specific label) button below the checkbox
      • If the certification checkbox is not checked and "Submit" is pressed, display an error that indicates the checkbox needs selecting in order to to have a successful submission
    • Label the checkbox label with the word “Confirm” if a related paper form also uses the word "Confirm"
    • Do not use the word "Confirm" as a button label
Calculate
  • Use to perform a calculation
Cancel
  • Use with caution to cancel a transaction, and not send information
  • Qualify what cancels if this button is pressed for example, "Cancel request"
  • Ensure user is returned to the point in the process where they selected "Cancel request"
  • Use with caution
    • It is difficult for users to understand which steps are cancelled within a task flow that involves multiple steps
  • Do not make "Cancel request" the primary action key
Save
  • Save:
    • Use to explicitly save changes made on a page, or sequence of pages, to the database or to the session
  • Don't save:
    • Use explicitly to not save the changes made on a page or sequence of pages
Add
  • Use to add/insert an item for example, add an address
    • If appropriate, specify what is being added as part of the button name
  • Use in a listing process to add another item to a list
Edit
  • Use to modify an item for example, modify an address
    • If appropriate, specify what is being modified as part of the button name
  • Use in a listing process to modify a selected item in a list
Delete
  • Use to delete an item for example, delete an address
    • If appropriate, specify what is being deleted as part of the button name
  • Use in a listing process to delete selected items from a list
View
  • Use to see an item such as view the status of an application
    • If appropriate, specify what is being viewed as part of the button name
Retrieve
  • Use to retrieve an item for example, retrieve an address
    • If appropriate, specify what is being retrieved as part of the button name
Search
  • Use to perform a search
Reset
  • Use to re-initialize all fields on a page (on client-side) to the original values when the page was first loaded
  • Tell users exactly what is reset if the reset spans more than one page (for example, "Reset page to defaults")
  • Avoid providing the "Reset" button for the following reasons:
    • Users can click the button by mistake
    • Users do not need unnecessary options that clutter the interface and require extra think time
Start again
  • Use when the users have to start over from step 1 in a sequence of steps
Print
  • Use only in situations where there is a requirement to prompt the user to print something important (such as a confirmation page with a confirmation or reference number)
    • A user may use the print feature in their browser to print the current page
  • Use "View in PDF" if the desired action is to load a PDF to view (then print if desired)
Clear
  • Do not use
  • Do not use the "Clear" button
  • Refer to "Reset" button section
Exit
Quit		 Do not use
  • Do not use "Exit" or "Quit" buttons, as they are redundant
    • Users often close the window of their browser to get out of an application
  • Use “Sign out” button for applications that require a sign in
  • Consider using “Cancel XXX” button, as it may be more appropriate depending on the requirement of the application
I agree Do not use
  • Do not use "I agree" checkbox or button to confirm that the entry of data is correct
    • The term “I agree” is primarily associated with “Disclaimer” pages that are presented to the user prior to launching the application
  • Refer to section on "Confirm" and "Certify" functions

Add-on features

Additional add-on features and behaviours are available.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: