Buttons - Documentation | Front - Admin & Dashboard Template

Types

Use .btn-*, .btn-outline-*, .btn-ghost-* classes to change the visual style of the button.

Preview
HTML

                    
                      <button type="button" class="btn btn-primary">Primary</button>
                      <button type="button" class="btn btn-outline-primary">Outline</button>
                      <button type="button" class="btn btn-ghost-primary">Ghost</button>
                      <button type="button" class="btn btn-link">link</button>

White

Outlined white color style is best suitable for secondary buttons.

Preview
HTML

                    
                      <button type="button" class="btn btn-white">Button white</button>

Color variants

Predefined solid color button styles.

Preview
HTML

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

Outline buttons

Use .btn-outline-*

Preview
HTML

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

Soft buttons

Use .btn-soft-*

Preview
HTML

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

Ghost buttons

Use .btn-ghost-*

Preview
HTML

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

Sizes

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

Preview
HTML

                    
                      <button type="button" class="btn btn-primary btn-lg">Large Button</button>
                      <button type="button" class="btn btn-primary">Default Size</button>
                      <button type="button" class="btn btn-primary btn-sm">Small Button</button>
                      <button type="button" class="btn btn-primary btn-xs">Extra small Button</button>

Button pilled

Use the .rounded-pill utility class to make buttons more rounded.

Preview
HTML

                    
                      <button type="button" class="btn btn-primary btn-pill">Primary</button>

Radio button group

This group of buttons provide checkbox or radio style button toggling.

Preview
HTML

Active Radio Radio

                    
                      <div class="btn-group btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-primary active">
                          <input type="radio" name="options" id="option1" checked> Active
                        </label>
                        <label class="btn btn-primary">
                          <input type="radio" name="options" id="option2"> Radio
                        </label>
                        <label class="btn btn-primary">
                          <input type="radio" name="options" id="option3"> Radio
                        </label>
                      </div>

Button icons

A contained button with an icon.

Preview
HTML

                    
                      <button type="button" class="btn btn-primary">
                        Add to Cart
                        <i class="tio-shopping-basket ml-1"></i>
                      </button>

With fixed width and height.

Preview
HTML

                    
                      <button type="button" class="btn btn-primary btn-icon">
                        <i class="tio-visible"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon">
                        <i class="tio-add"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                      </button>

Also available in all button sizes.

Preview
HTML

                    
                      <button type="button" class="btn btn-primary btn-icon btn-lg">
                        <i class="tio-add"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon">
                        <i class="tio-add"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon btn-sm">
                        <i class="tio-add"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon btn-xs">
                        <i class="tio-add"></i>
                      </button>

Button status

Use .btn-status to add all kinds of status indicators.

Looking for larger or smaller status size? Add .btn-sm-status or .btn-lg-status for additional sizes.

Preview
HTML

2 3 2 3

                    
                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-primary"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-shopping-basket-outlined"></i>
                        <span class="btn-status btn-status-primary">2</span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-voice-line"></i>
                        <span class="btn-status btn-lg-status btn-status-primary">3</span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-soft-primary rounded-circle mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-primary"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-soft-primary rounded-circle mr-2" href="javascript:;">
                        <i class="tio-shopping-basket-outlined"></i>
                        <span class="btn-status btn-status-primary">2</span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-soft-primary rounded-circle mr-2" href="javascript:;">
                        <i class="tio-voice-line"></i>
                        <span class="btn-status btn-lg-status btn-status-primary">3</span>
                      </a>
                      <!-- End Button Status -->

Available in all theme colors.

Preview
HTML

                    
                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-primary"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-secondary"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-success"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-danger"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-warning"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-info"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-light"></span>
                      </a>
                      <!-- End Button Status -->

                      <!-- Button Status -->
                      <a class="btn btn-icon btn-primary mr-2" href="javascript:;">
                        <i class="tio-notifications-on-outlined"></i>
                        <span class="btn-status btn-sm-status btn-status-dark"></span>
                      </a>
                      <!-- End Button Status -->

Button with loader

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

Preview
HTML

                    
                      <button class="btn btn-primary" type="button" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        <span class="sr-only">Loading...</span>
                      </button>
                      <button class="btn btn-primary" type="button" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Loading...
                      </button>

                      <button class="btn btn-primary" type="button" disabled>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        <span class="sr-only">Loading...</span>
                      </button>
                      <button class="btn btn-primary" type="button" disabled>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        Loading...
                      </button>