Buttons

Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Use any of the base or pre-defined color modifier classes that can be found in the colors section. Also, you can use the default Bootstrap colors.

Base colors

Base color 1 Base color 2 Base color 3 Base color 4 Base color 5

Bootstrap default

Example


<a href="#" class="btn btn-styled btn-base-1">Base color 1</a>
<a href="#" class="btn btn-styled btn-base-2">Base color 2</a>
<a href="#" class="btn btn-styled btn-base-3">Base color 3</a>
<a href="#" class="btn btn-styled btn-base-4">Base color 4</a>
<a href="#" class="btn btn-styled btn-base-5">Base color 5</a>

<button type="button" class="btn btn-styled btn-primary">Primary</button>
<button type="button" class="btn btn-styled btn-secondary">Secondary</button>
<button type="button" class="btn btn-styled btn-success">Success</button>
<button type="button" class="btn btn-styled btn-danger">Danger</button>
<button type="button" class="btn btn-styled btn-warning">Warning</button>
<button type="button" class="btn btn-styled btn-info">Info</button>
<button type="button" class="btn btn-styled btn-light">Light</button>
<button type="button" class="btn btn-styled btn-dark">Dark</button>

<button type="button" class="btn btn-styled btn-link">Link</button>

Outline buttons

In need of a button, but not the hefty background colors they bring? Add next to the default button's class the .btn-outline one to remove all background images and colors on any button.

Base color 1 Base color 2 Base color 3 Base color 4

Example


<a href="#" class="btn btn-styled btn-base-1 btn-outline">Base color 1</a>
<a href="#" class="btn btn-styled btn-base-2 btn-outline">Base color 2</a>
<a href="#" class="btn btn-styled btn-base-3 btn-outline">Base color 3</a>
<a href="#" class="btn btn-styled btn-base-4 btn-outline">Base color 4</a>

Colors

With a single class you can change the button's color with any of the following options.

Example


<a href="#" class="btn btn-styled btn-block btn-blue">Blue button</a>
<a href="#" class="btn btn-styled btn-block btn-teal-blue">Teal Blue button</a>
<a href="#" class="btn btn-styled btn-block btn-green">Green button</a>
<a href="#" class="btn btn-styled btn-block btn-red">Red button</a>
<a href="#" class="btn btn-styled btn-block btn-pink">Pink button</a>
<a href="#" class="btn btn-styled btn-block btn-orange">Orange button</a>
<a href="#" class="btn btn-styled btn-block btn-yellow">Yellow button</a>
<a href="#" class="btn btn-styled btn-block btn-purple">Purple button</a>

Sizes

Fancy larger or smaller buttons? Add .btn-xl, .btn-lg, .btn-sm or .btn-xs for additional sizes.

Extra sm Small Default Large Extra lg

Example


<a href="#" class="btn btn-styled btn-xs btn-base-1">Extra sm</a>
<a href="#" class="btn btn-styled btn-sm btn-base-1">Small</a>
<a href="#" class="btn btn-styled btn-base-1">Default</a>
<a href="#" class="btn btn-styled btn-lg btn-base-1">Large</a>
<a href="#" class="btn btn-styled btn-xl btn-base-1">Extra lg</a>

Shapes

You can esily costomize button's shape by simply adding one of the additional classes available: .btn-round, .btn-circle or .btn-square.

Default radius Round shape Circle shape Square shape

Example


<a href="#" class="btn btn-styled btn-base-1">Default radius</a>
<a href="#" class="btn btn-styled btn-base-1 btn-round">Round shape</a>
<a href="#" class="btn btn-styled btn-base-1 btn-circle">Circle shape</a>
<a href="#" class="btn btn-styled btn-base-1 btn-square">Square shape</a>

Icon buttons

Add a little more style to the button's appereance by adding one of the hundreds font icons available.

Icon Left Icon Left Icon Right Icon Right

Example


<a href="#" class="btn btn-styled btn-base-1 btn-icon-left">
    <i class="fa fa-search"></i> Icon Left
</a>
<a href="#" class="btn btn-styled btn-base-1 btn-icon-left">
    <i class="fa fa-search"></i> Icon Left
</a>

<a href="#" class="btn btn-styled btn-base-2 btn-icon-right">
    Icon Right <i class="fa fa-search"></i>
</a>
<a href="#" class="btn btn-styled btn-base-2 btn-icon-right">
    Icon Right <i class="fa fa-search"></i>
</a>

Fluid buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Example


<button type="button" class="btn btn-styled btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-styled btn-secondary btn-lg btn-block">Block level button</button>