Buttons

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

ipsButton_primary

ipsButton_alternate

ipsButton_important

ipsButton_light

ipsButton_veryLight

ipsButton_overlaid

ipsButton_link

Button sizes

ipsButton_medium

ipsButton_verySmall

ipsButton_small

ipsButton_large

ipsButton_veryLarge

ipsButton_fullWidth
Can be combined with another size, above.

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:

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>