Default buttons
Button styles can be applied to anything with the .btn
class applied. However, typically you’ll want to apply these to only <a>
and <button>
elements for the best rendering.
[message_box type= »warning » close= »no »]
Ex: element icon= »user » then name of icons is « fa-user ».
You can find the full examples of usage at Font Awesome – Font Awesome 4.0.3
[/message_box]
Button | Type | Icon | Description |
---|---|---|---|
[button icon= »pencil » ]Default[/button] | pencil | Standard gray button with gradient | |
[button type= »primary » icon= »comment »]Primary[/button] | primary | comment | Provides extra visual weight and identifies the primary action in a set of buttons |
[button type= »info » icon= »info-circle »]Info[/button] | info | info-circle | Used as an alternative to the default styles |
[button type= »success » icon= »check »]Success[/button] | success | check | Indicates a successful or positive action |
[button type= »warning » icon= »warning »]Warning[/button] | warning | warning | Indicates caution should be taken with this action |
[button type= »danger » icon= »refresh »]Danger[/button] | danger | refresh | Indicates a dangerous or potentially negative action |
[button type= »inverse » icon= »trash-o »]Inverse[/button] | inverse | trash-o | Alternate dark gray button, not tied to a semantic action or use |
[button type= »link » icon= »twitter »]Link[/button] | link | twitter | Deemphasize a button by making it look like a link while maintaining button behavior |
[button target="_self" link="#"] Default icon="pencil" [/button] [button type="primary" icon="comment" target="_self" link="#"] Primary [/button] [button type="info" icon="info-sign" target="_self" link="#"] Info [/button] [button type="success" icon="check" target="_self" link="#"] Success [/button] [button type="warning" icon="warning" target="_self" link="#"] warning [/button] [button type="danger" icon="refresh" target="_self" link="#"] Danger [/button] [button type="inverse" icon="trash" target="_self" link="#"] Inverse [/button] [button type="link" icon="twitter" target="_self" link="#"] Link [/button]
Flat buttons
[button type= »flat primary » ]Primary Button[/button]
[button type= »flat success »]Success Button[/button]
[button type= »flat warning »]Warning Button[/button]
[button type= »flat inverse » ]Inverse Button[/button]
[button type= »flat info » ]Info Button[/button]
[button type= »flat danger »]Danger Button[/button]
[button type="flat" target="_self" link="#"] Default Button [/button] [button type="flat primary" target="_self" link="#"] Primary Button [/button] [button type="flat success" target="_self" link="#"] Success Button [/button] [button type="flat warning" target="_self" link="#"] Warning Button [/button] [button type="flat inverse" target="_self" link="#"] Inverse Button [/button] [button type="flat info" target="_self" link="#"] Info Button [/button] [button type="flat danger" target="_self" link="#"] Danger Button [/button]
Cross browser compatibility
IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button
elements, rendering text gray with a nasty text-shadow that we cannot fix.
Button sizes
Fancy larger or smaller buttons? Add size= large
, small
, or mini
for additional sizes.
[button type= »primary » size= »lg »]Large button[/button]
[button size= »lg »]Large button[/button]
[button type= »primary » ]Default button[/button]
[button ]Default button[/button]
[button type= »primary » size= »sm »]Small button[/button]
[button size= »sm »]Small button[/button]
[button type= »primary » size= »xs »]Mini button[/button]
[button size= »xs »]Mini button[/button]
[button type="primary" size="lg" target="_self" link="#"] Large button [/button] [button size="lg" target="_self" link="#"] Large button [/button] [button type="primary" target="_self" link="#"] Default button [/button] [button target="_self" link="#"] Default button [/button] [button type="primary" size="sm" target="_self" link="#"] Small button [/button] [button size="sm" target="_self" link="#"] Large Small [/button] [button type="primary" size="xs" target="_self" link="#"] Mini button [/button] [button size="xs" target="_self" link="#"] Mini button [/button]
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
[button size= »lg » full= »block »] Block level button[/button]
[button type="primary" size="lg" full="block"] Block level button [/button] [button size="lg" full="block"] Block level button [/button]
Disabled state
For disabled buttons, add the state=disabled
class to links and the disabled
attribute for <button>
elements.
[button size= »lg » state= »disabled »]Button[/button]
[button type="primary" size="lg" state="disabled"] Primary button [/button] [button size="lg" state="disabled"] Button [/button]
[space height= »10″]
Customization Options / Features
- type : style of the button. You can combine the following options(primary, info, success, warning, danger, inverse, link, flat)
- icon : add any mini-icon (from the Icons section) here.
- size : available sizes ( xs, sm, default, lg)
- full : the full width of a parent
- target : link target (eg. target= »_blank » will open link in a new window)
- state : disabled buttons, available ( true, disabled)