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).
Very light button
Very small button
Very large button
Can be combined with another size, above.
Full width button
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 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.
<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>