Buttons Extended

Custom additions to the Button component

On this page

Variants extensions

Additions the the Button variants

Example

html

<button type="button" class="btn btn-default">Button Default</button>
<button type="button" class="btn btn-ghost">Button Ghost</button>
<button type="button" class="btn btn-ghost-invert">Button Ghost Invert</button>

Icon Buttons

Types

html

<span class="p-3 mt-3 d-inline-block">
  <button type="button" class="btn btn-icon-md btn-icon-default rounded-circle"><span class="fa fa-arrow-down"></span></button>
</span>
<span class="p-3 mt-3 d-inline-block">
  <button type="button" class="btn btn-icon-md btn-icon-primary rounded-circle"><span class="fa fa-arrow-down"></span></button>
</span>
<span class="p-3 mt-3 d-inline-block">
  <button type="button" class="btn btn-icon-md btn-icon-secondary rounded-circle"><span class="fa fa-arrow-down"></span></button>
</span>
<span class="p-3 mt-3 d-inline-block">
  <button type="button" class="btn btn-icon-md btn-icon-ghost-on-light rounded-circle"><span class="fa fa-arrow-down"></span></button>
</span>
<span class="bg-primary p-3 mt-3 d-inline-block">
  <button type="button" class="btn btn-icon-md btn-icon-ghost-on-dark rounded-circle"><span class="fa fa-arrow-down"></span></button>
</span>

Shapes

html

<button type="button" class="btn btn-icon-md btn-icon-default rounded-3"><span class="fa fa-arrow-down"></span></button>
<button type="button" class="btn btn-icon-md btn-icon-default rounded-circle"><span class="fa fa-arrow-down"></span></button>
<button type="button" class="btn btn-icon-md btn-icon-default"><span class="fa fa-arrow-down"></span></button>

Sizes

html

<div>
  <button type="button" class="btn btn-icon-default btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-default btn-icon-sm rounded-circle"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-default btn-icon-md rounded-circle"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-default btn-icon-lg rounded-circle"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-default btn-icon-xl rounded-circle"><span class="fa fa-arrow-down"></span></button>
</div>
<div class="mt-2">
  <button type="button" class="btn btn-icon-default btn-icon-xs rounded-circle">?</button>
  <button type="button" class="btn btn-icon-default btn-icon-sm rounded-circle">?</button>
  <button type="button" class="btn btn-icon-default btn-icon-md rounded-circle">?</button>
  <button type="button" class="btn btn-icon-default btn-icon-lg rounded-circle">?</button>
  <button type="button" class="btn btn-icon-default btn-icon-xl rounded-circle">?</button>
</div>

Step Buttons

Basic Step Button

Button for multi-step actions.

html

<div>
  <button type="button" class="btn btn-step rounded-circle">1</button>
  <button type="button" class="btn btn-step rounded-circle active">2</button>
  <button type="button" class="btn btn-step rounded-circle btn-step-success"><span class="fas fa-check"></span></button>
</div>

Small Step Button

Add .btn-step-sm for a smaller Step Button.

html

<div>
  <button type="button" class="btn btn-step btn-step-sm rounded-circle">1</button>
  <button type="button" class="btn btn-step btn-step-sm rounded-circle active">2</button>
  <button type="button" class="btn btn-step btn-step-sm rounded-circle btn-step-success"><span class="fas fa-check"></span></button>
</div>

Pulsating

Add .btn-pulsate to make a button pulsate. Meant to be only used on round buttons.

html

<div>
  <button type="button" class="btn btn-icon-primary btn-icon-xs rounded-circle btn-pulsate"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-primary btn-icon-sm rounded-circle btn-pulsate"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-primary btn-icon-md rounded-circle btn-pulsate"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-primary btn-icon-lg rounded-circle btn-pulsate"><span class="fa fa-arrow-down"></span></button>
  <button type="button" class="btn btn-icon-primary btn-icon-xl rounded-circle btn-pulsate"><span class="fa fa-arrow-down"></span></button>
</div>