Basics
The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it.
As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below).
Button styles
ipsButton_normal
Normal button
ipsButton_primary
Primary button
ipsButton_alternate
Alternate button
ipsButton_important
Important button
ipsButton_light
Light button
ipsButton_veryLight
Very light button
ipsButton_overlaid
Overlaid button
ipsButton_link
Link button
Button sizes
ipsButton_medium
Medium button
ipsButton_verySmall
Very small button
ipsButton_small
Small button
ipsButton_large
Large button
ipsButton_veryLarge
Very large button
ipsButton_fullWidth
Can be combined with another size, above.
Full width button
Disabled buttons
Buttons can be visually disabled either by adding the class ipsButton_disabled, or, on relevant input elements, adding the disabled property. For example:
<a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Disabled button (link)</a>
<input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Disabled button (input)'>
These would render like so:
Disabled button (link)
Split buttons
Split buttons allow you to create toolbars easily by specifying a list of buttons that display joined to each other.
They are created by specifying the class ipsButton_split on a wrapper element containing two or more buttons. The wrapper element can be a <ul> tag, or any other that makes sense for your use.
All of the buttons in a split button group should be the same size, otherwise results are unpredictable. Different styles can be used on each button, though.
<ul class='ipsButton_split'>
<li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Button 1</a></li>
<li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 2</a></li>
<li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Button 3</a></li>
</ul>
Button 1
Button 2
Button 3