Buttons - Grid System

Table of contents

Overview

The button classes are based off Twitter Bootstrap. Due to colour contrast issues, the colours have been modified to pass WCAG 2.0 accessibility rules. They are styled to match the "message" module classes.

Button styles, as the name sugguests, are meant to be applied to buttons - both input and button. There are certain cases where it may also be appropriate to apply them to links.

Base classes

Button CSS can be applied to a <button>, an <input> or a <a href>:

  • Button
  • Input
  • Link
Button Disabled Class Description
Default
Default
 button Standard gray button with gradient
Accent
Accent
 button button-accent Provides extra visual weight and identifies the primary action
Info
Info
 button button-info Used as an alternate to the default styles
Confirm
Confirm
 button button-confirm Indicates a successful or positive action
Alert
Alert
 button button-alert Indicates a dangerous or potentially negative action
Attention
Attention
 button button-attention Indicates caution should be taken with this action
Dark
Dark
 button button-dark Alternate dark gray button, not tied to a semantic action or use
None
None
 button button-none Maintains the dimensions of a button without creating the visual style

Supporting Classes

Button sizes

A change in button size will affect the button padding and font-size. Be weary of combining the button-* size classes with the font-* size classes, as this may lead to illegible (too small) text.

View code 
  1. <ul class="menu-horizontal">
  2.   <li><a href="#" class="button button-small">button-small</a></li>
  3.   <li><a href="#" class="button">default</a></li>
  4.   <li><a href="#" class="button button-large">button-large</a></li>
  5.   <li><a href="#" class="button button-xlarge">button-xlarge</a></li>
  6. </ul>
  7. <ul class="menu-horizontal">
  8.   <li><a href="#" class="button button-small button-dark">button-small</a></li>
  9.   <li><a href="#" class="button button-dark">default</a></li>
  10.   <li><a href="#" class="button button-large button-dark">button-large</a></li>
  11.   <li><a href="#" class="button button-xlarge button-dark">button-xlarge</a></li>
  12. </ul>

Button width

Buttons have the attribute display:inline; by default. Use the CSS display-block to make the button full width within the grid cell or container it is in.

View code 
  1. <ul class="list-bullet-none margin-top-none indent-none">
  2.   <li class="margin-bottom-medium"><a href="#" class="button">default</a></li>
  3.   <li><a href="#" class="button display-block">display-block</a></li>
  4. </ul>

Disabled buttons

Remove the functionality of a button.

View code 
  1. <ul class="menu-horizontal margin-top-none">
  2.   <li><a href="#" class="button">default</a></li>
  3.   <li><a href="#" class="button button-disabled ui-disabled">disabled</a></li>
  4. </ul>

Embedded navigation

These classes allows for embedded page navigation. The navigation may be based off an unordered list or paragraph text. To make the unordered list of buttons display horizontally, use the menu-horizontal class. To group buttons together, use the button-group class together.

Unordered list using menu-horizontal

View code 
  1. <ul class="menu-horizontal margin-top-none">
  2.    <li><a href="#" class="button button-accent">Primary Action</a></li>
  3.    <li><a href="#" class="button">Action</a></li>
  4. </ul>

Unordered list using button-group

View code 
  1. <ul class="button-group margin-top-none">
  2.    <li><a href="#" class="button button-accent">Primary Action</a></li>
  3.    <li><a href="#" class="button">Action</a></li>
  4. </ul>

Muliple unordered lists using button-toolbar and button-group

View code 
  1. <div class="button-toolbar margin-top-none">
  2.    <ul class="button-group">
  3.       <li><a href="#" class="button button-accent">Primary Action</a></li>
  4.       <li><a href="#" class="button">Action</a></li>
  5.    </ul>
  6.    <ul class="button-group">
  7.       <li><a href="#" class="button">Action</a></li>
  8.       <li><a href="#" class="button">Action</a></li>
  9.    </ul>
  10.    <ul class="button-group">
  11.       <li><a href="#" class="button">Help</a></li>
  12.    </ul>
  13. </div>

Examples

Warning: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris.

Did you know?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris.

Continue reading

Web Experience Toolkit (WET) Collaborative open source project led by the Government of Canada

Aboutclick to expand contents 

Contact usclick to expand contents 

Newsclick to expand contents 

Stay connectedclick to expand contents 

 

loading