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»]Default Button[/button] [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 type=»primary» size=»lg» full=»block» ] Block level button[/button] [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 type=»primary» size=»lg» state=»disabled» icon=»edit»]Primary button[/button] [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)