Jump to content

Guides

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>

 


  Report Guide


×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy