Example
<a href="#">Standard Link</a>1.2 #permalink Base styles & states
Buttons should always be wrapped in a .btn-row div
Examples
Default styling
.disabled
Disabled button. If you use
<button> element, that is acceptable to add disabled attribute instead.
<div class="btn-row">
<button type="submit" class="btn btn-default [modifier class]">Button</button>
<button type="submit" class="btn btn-primary [modifier class]">Button</button>
</div>1.3 #permalink Button skins
Always give a button a skin class. Never let it go out as just a single .btn, as it will not be styled correcly.
Examples
Default styling
.btn-default
Indicate that the button a standard button.
.btn-primary
Indicate that the button is the primary feature of this form.
.btn-danger
Indicate that the button will perform a negative task, such as deleting.
.btn-success
Success button style
<div class="btn-row">
<a href="#" class="btn [modifier class]">Link</a>
<button type="submit" class="btn [modifier class]">Button</button>
<input type="submit" class="btn [modifier class]" value="Input:submit" />
<input type="button" class="btn [modifier class]" value="Input:button" />
</div>1.4 #permalink Buttons with icons
Use icons in buttons where usablity can be improved. (See icons section for all codes)
<div class="btn-row">
<a href="#" class="btn">
<span class="icon icon-power-off"></span> Log out
</a>
<a href="#" class="btn btn-default">
<span class="icon icon-search"></span> Search
</a>
<a href="#" class="btn btn-primary">
<span class="icon icon-download"></span> Download
</a>
<a href="#" class="btn btn-danger">
<span class="icon icon-trash-o"></span> Delete
</a>
</div>1.5 #permalink Sizing
Additional button sizes should be used very sparingly, and should be consulted on before using.
Examples
Default styling
.btn-lg
Large button: May never be used, but could be used as major CTA.
.btn-sm
Small button: More than likely will never be used, however may be included as a mix-in for sidebar boxes.
.btn-xs
Mini button: Should be used for actions within tables, such as "Delete item".
.btn-block
Block level button: Used for major actions only.
<div class="btn-row">
<button type="submit" class="btn btn-default [modifier class]">Button</button>
<button type="submit" class="btn btn-primary [modifier class]">Button</button>
<button type="submit" class="btn btn-danger [modifier class]">Button</button>
</div>
Examples
Default styling
.btn-primary
primary
.btn-danger
danger
.btn-success
success
.btn-boxed
more obvious link button
<div class="btn-row">
<a href="#" class="btn btn-link [modifier class]">Link</a>
<button type="submit" class="btn btn-link [modifier class]">Button</button>
<input type="submit" class="btn btn-link [modifier class]" value="Input:submit" />
<input type="button" class="btn btn-link [modifier class]" value="Input:button" />
</div>1.7 #permalink Static Buttons
Final states for buttons to land in.
Examples
Default styling
.btn-success
success
<button type="submit" class="btn btn-static [modifier class]" disabled>Success!</button>