Buttons
Usage notes
Buttons are written to be able to be extended in many different ways to support a wide range of contexts.
There should usually only be two types of button; primary and secondary.
A primary button is used to highlight the most important action on the page, and generally there should only be one of these per page.
If more than one primary button is required, then consider splitting the form over multiple pages.
Usage notes
Icons can be used to impart additional information about the nature of the button.
For example, consider placing a 'tick' icon (class="icon-check") on a primary button, to give confidence to the user to click.
Usage notes
Buttons can be different sizes, and have combinations of sizes. Generally, the primary button should be the largest button on the page.
Usage notes
Use when you always want a button to be as wide as its parent.
Usage notes
There should usually only be two types of button; primary and secondary.
A secondary button represents a 'support' action. For example, 'look-up', 'back' etc.
Usage notes
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
Usage notes
Group a set of buttons together on a single line to form a button bar.