Button Shortcode

Button

[button link="http://..."]Button[/button]

Button with Icon

Button with icon

[button icon="icon-search"]Button with Icon[/button]

NOTE: link and icon are supported with all button styles and sizes.

Bootstrap Button

Add type="bootstrap" to change a default button to a Bootstrap button. Use style and size attributes to customize it.

NOTE: style and size attributes work only for buttons with type="bootstrap"

Button Styles

Supported Values: default, primary, success, info, warning, danger, link.

Default Primary Success Info Warning Danger Link

[button type="bootstrap" style="default"]Default[/button]
[button type="bootstrap" style="primary"]Primary[/button]
[button type="bootstrap" style="success"]Success[/button]
[button type="bootstrap" style="info"]Info[/button]
[button type="bootstrap" style="warning"]Warning[/button]
[button type="bootstrap" style="danger"]Danger[/button]
[button type="bootstrap" style="link"]Link[/button]

Button Size

Supported additions to size attribute: large, small, xsmall.

Large Button Large Button

Default Button Default Button

Small Button Small Button

Extra Small Button Extra Small Button

[button type="bootstrap" style="default" size="large"]Large Button[/button]
[button type="bootstrap" style="primary" size="large"]Large Button[/button]
[button type="bootstrap" style="default"]Default Button[/button]
[button type="bootstrap" style="primary"]Default Button[/button]
[button type="bootstrap" style="default" size="small"]Small Button[/button]
[button type="bootstrap" style="primary" size="small"]Small Button[/button]
[button type="bootstrap" style="default" size="xsmall"]Extra Small Button[/button]
[button type="bootstrap" style="primary" size="xsmall"]extra Small Button[/button]

### Button <a class="default-button" href="#">Button</a> [button link="http://..."]Button[/button] ### Button with Icon <a class="default-button" href="#"><span class="icon-search"> </span> Button with icon</a> [button icon="icon-search"]Button with Icon[/button] NOTE: `link` and `icon` are supported with all button styles and sizes. </div> ### Bootstrap Button Add <code>type="bootstrap"</code> to change a default button to a Bootstrap button. Use `style` and `size` attributes to customize it. <div class="alert alert-warning">NOTE: <code>style</code> and <code>size</code> attributes work only for buttons with <code>type="bootstrap"</code></div> ### Button Styles Supported Values: `default`, `primary`, `success`, `info`, `warning`, `danger`, `link`. <div class="bd-doc-example"> <p> <a class="btn btn-default" href="#">Default</a> <a class="btn btn-primary" href="#">Primary</a> <a class="btn btn-success" href="#">Success</a> <a class="btn btn-info" href="#">Info</a> <a class="btn btn-warning" href="#">Warning</a> <a class="btn btn-danger" href="#">Danger</a> <a class="btn btn-link" href="#">Link</a> </p> </div> <pre> [button type="bootstrap" style="default"]Default[/button] [button type="bootstrap" style="primary"]Primary[/button] [button type="bootstrap" style="success"]Success[/button] [button type="bootstrap" style="info"]Info[/button] [button type="bootstrap" style="warning"]Warning[/button] [button type="bootstrap" style="danger"]Danger[/button] [button type="bootstrap" style="link"]Link[/button] </pre> ### Button Size Supported additions to `size` attribute: `large`, `small`, `xsmall`. <div class="bd-doc-example"> <p> <a class="btn btn-default btn-lg" href="#">Large Button</a> <a class="btn btn-primary btn-lg" href="#">Large Button</a> </p> <p> <a class="btn btn-default" href="#">Default Button</a> <a class="btn btn-primary" href="#">Default Button</a> </p> <p> <a class="btn btn-default btn-sm" href="#">Small Button</a> <a class="btn btn-primary btn-sm" href="#">Small Button</a> </p> <p> <a class="btn btn-default btn-xs" href="#">Extra Small Button</a> <a class="btn btn-primary btn-xs" href="#">Extra Small Button</a> </p> </div> <pre> [button type="bootstrap" style="default" size="large"]Large Button[/button] [button type="bootstrap" style="primary" size="large"]Large Button[/button] [button type="bootstrap" style="default"]Default Button[/button] [button type="bootstrap" style="primary"]Default Button[/button] [button type="bootstrap" style="default" size="small"]Small Button[/button] [button type="bootstrap" style="primary" size="small"]Small Button[/button] [button type="bootstrap" style="default" size="xsmall"]Extra Small Button[/button] [button type="bootstrap" style="primary" size="xsmall"]extra Small Button[/button] </pre> ### See Also [Shortcodes Overview](page:3621)