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
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 .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.
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;
}