0.8.6 beta

| Axle | 'buttons'

Axle's buttons are based on the principal that the styles support the markup. The UIs presented here are styled simply for button, input[type=submit], input[type=button], a.button. Follow the code samples below for instructions on using class placed on the parent block element to get special layout and sizing adjustments.

1. Primary buttons

Button textButton textButton text

All buttons by default assume this style. Apply the disabled="disabled" attribute to the buttons rendered useless to the user.

Example code:

<button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>

<input type="submit" value="Button text"><input type="submit" value="Button text"><input type="submit" value="Button text" disabled="disabled">

<input type="button" value="Button text"><input type="button" value="Button text"><input type="button" value="Button text" disabled="disabled">

<a href="#" class="button">Button text</a><a href="#" class="button">Button text</a><a href="#" class="button"id="disabled">Button text</a>
				

1.1 Primary buttons w/cancel option link

Place the .cancel_buttons class on the parent block.

Example code:

<div class="cancel_buttons" id="">
  <button>Button text</button><button>Cancel</button><button disabled="disabled">Disabled cancel</button>
</div>
<div class="cancel_buttons" id="">
  <input type="submit" value="Button text"><input type="submit" value="Cancel"><input type="submit" value="Disabled cancel" disabled="disabled">
</div>
<div class="cancel_buttons" id="">
  <input type="button" value="Button text"><input type="button" value="Cancel"><input type="button" value="Disabled cancel" disabled="disabled">
</div>
<div class="cancel_buttons" id="">
  <a href="#" class="button">Button text</a><a href="#" class="button">Cancel</a><a href="#" class="button" id="disabled">Disabled cancel</a>
</div>
				

1.2 All Primary buttons

To have all your buttons appear with the Primary style, use the class .primary_buttons in the parent block element.

Example code:

<div class="primary_buttons" id="">
  <button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
<div class="primary_buttons" id="">
  <input type="submit" value="Button text"><input type="submit" value="Button text"><input type="submit" value="Button text" disabled="disabled">
</div>
<div class="primary_buttons" id="">
  <input type="button" value="Button text"><input type="button" value="Button text"><input type="button" value="Button text" disabled="disabled">
</div>
<div class="primary_buttons" id="">
  <a href="#" class="button">Button text</a><a href="#" class="button">Button text</a><a href="#" class="button" id="disabled">Button text</a>
</div>
				

2. Secondary buttons

Place the .secondary_buttons class on the parent block

Example code:

<div class="secondary_buttons">
	<button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
<div class="secondary_buttons">
	<input type="submit" value="Button text"><input type="submit" value="Button text"><input type="submit" value="Button text" disabled="disabled">
</div>
<div class="secondary_buttons">
	<input type="button" value="Button text"><input type="button" value="Button text"><input type="button" value="Button text" disabled="disabled">
</div>
<div class="secondary_buttons">
	<a href="#" class="button">Button text</a><a href="#" class="button">Button text</a><a href="#" class="button" id="disabled">Button text</a>
</div>

// cancel option ~
<div class="secondary_buttons cancel_buttons" id="">
  <button>Button text</button><button>Cancel</button><button disabled="disabled">Disabled cancel</button>
</div>
				

3. Small primary button

The small primary button will assume the default style. Apply the .small_buttons class to a parent block element to reduce the appearance.

Example code:

<div class="small_buttons">
	<button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>

// cancel option ~
<div class="small_buttons cancel_buttons" id="">
  <button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
				

4. Small secondary button

The small secondary button requires two class modifications.
Apply the .secondary_buttons and .small_button classes to a parent block element for this UI.

Example code:

<div class="secondary_buttons small_buttons">
	<button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>

// cancel option ~
<div class="secondary_buttons small_buttons cancel_buttons" id="">
  <button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
				

5. Combination usage

To produce a series of buttons, simply concatenate a series of <button> tags. The disabled="disabled" attribute is required to apply the disabled UI.

Example code:

<button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>

// cancel option ~
<div class="cancel_buttons" id="">
  <button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
					

5.1 Dual primary button

To produce the first (2) buttons carry over the primary UI style, simply concatenate a series of <button> tags. IMPORTANT! you will need to place a .dual_primary_buttons class in the directly preceding parent. The disabled="disabled" attribute is required to apply the disabled UI.

For the 'cancel' option, use the class .dual_primary_cancel_buttons on the parent block.

Example code:

<div class="dual_primary_buttons">
	<button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>

// cancel option ~
<div class="dual_primary_cancel_buttons" id="">
  <button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
					

5.2 Reverse primary/secondary button

To produce an alternate series of buttons whereas the first (1) button is the secondary UI and the remaining buttons use the primary UI style, simply concatenate a series of <button> tags. IMPORTANT! you will need to place a .reverse_primary_buttons class in the directly preceding parent. The disabled="disabled" attribute is required to apply the disabled UI.

Example code:

<div class="reverse_primary_buttons">
	<button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>

or

<div>
  <p class="reverse_primary_button">
    <button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
  </p>
</div>
					

5.3 Combination usage small buttons

To produce a series of buttons, simply concatenate a series of <button> tags. The disabled="disabled" attribute is required to apply the disabled UI. For the smaller buttons, place the .small_buttons class on a parent container.

Example code:

<div class="small_buttons">
	<button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
				

5.4 Dual primary small buttons

To produce an alternate series of buttons whereas the first (2) buttons carry over the primary UI style, simply concatenate a series of <button> tags. IMPORTANT! you will need to place a .dual_primary_buttons_small class in the directly preceding parent. The disabled="disabled" attribute is required to apply the disabled UI.

Example code:

<div class="dual_primary_buttons_small">
	<button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>

or

<div>
  <p class="dual_primary_buttons_small">
    <button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
  </p>
</div>
					

5.5 Reverse primary small buttons

To produce an alternate series of buttons whereas the first (2) buttons carry over the primary UI style, simply concatenate a series of <button> tags. IMPORTANT! you will need to place a .dual_primary_buttons_small class in the directly preceding parent. The disabled="disabled" attribute is required to apply the disabled UI.

Example code:

<div class="reverse_primary_buttons_small">
	<button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>

or

<div>
  <p class="reverse_primary_buttons_small">
    <button>Button text</button><button>Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
  </p>
</div>
					

6. Interaction | large

Post click user interaction. Example, user clicked the Primary button.

Button textButton textButton text

Clicking a button will dynamically add the .active class to the <button> tag.

Example code:

<button class="active">Button text</button><button>Button text</button><button disabled="disabled">Button text</button>

<input type="submit" value="Button text" class="active"><input type="submit" value="Button text" class=""><input type="submit" value="Button text" disabled="disabled">

<a href="#" class="button active">Button text</a><a href="#" class="button">Button text</a><a href="#" spanclass="button" id="disabled">Button text</a>
				

7. Interaction | small

Follow the same convention as '4. Small primary button' by placing .small_buttons class to the parent block element as well as '6. Interaction' by dynamically placing the .active class on the clicked button.

Example code:

<div class="small_buttons">
  <button class="active">Button text</button><button>Button text</button><button disabled="disabled">Button text</button>
</div>
			

7. Mini buttons

In the example below, the class .pill_buttons are build using the mixin of .mini_buttons

Example HTML:

<div class="pill_buttons">
  <button>X</button><button>X</button><button>X</button>
</div>
			

Example LESS:

.pill_buttons {		// semantic named class
  .mini_buttons;	// LESS mixin use
}
			

7.1 Pill button paging

Example HTML:

<div class="pill_buttons_nav" id="">
  <button><span>reverse</span></button><button><span>advance</span></button>
</div>
			

Example LESS:

.pill_buttons_nav {
  .mini_buttons_paging;
}