No results for " "
Make sure that all words are spelled correctly.
Start typing to search for
Products, orders, customers, actions, etc.
Notifications
Mark All as Read
See all 15 notifications

Buttons

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

Basic Example #

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-secondary">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-success">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-danger">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-warning">Button</button>
    </div>
    <div class="col-auto"><button type="button" class="btn btn-info">Button</button></div>
    <div class="col-auto">
        <button type="button" class="btn btn-light">Button</button>
    </div>
    <div class="col-auto"><button type="button" class="btn btn-dark">Button</button></div>
</div>

Outline buttons #

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-outline-primary">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-secondary">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-success">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-danger">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-warning">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-info">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-light">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-dark">Button</button>
    </div>
</div>
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Sizes #

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

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-lg">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sm">Button</button>
    </div>
</div>

Multiline #

Buttons can also contain multi-line content.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-lg">
            Button<br />Test multiline button
        </button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary">
            Button<br />Test multiline button
        </button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sm">
            Button<br />Test multiline button
        </button>
    </div>
</div>

Disabled State #

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-lg" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sm" disabled="">Button</button>
    </div>
</div>

Disabled buttons in the different color variations.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-secondary" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-success" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-danger" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-warning" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-info" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-light" disabled="">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-dark" disabled="">Button</button>
    </div>
</div>

Loading State #

Turn buttons to the loading state by adding .btn-sa-loading class.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-loading btn-lg">
            Button
        </button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-loading btn-sm">
            Button
        </button>
    </div>
</div>

Buttons in loading state and in different color variations.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-secondary btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-success btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-danger btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-warning btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-info btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-light btn-sa-loading">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-dark btn-sa-loading">Button</button>
    </div>
</div>

Pill #

Add the .btn-sa-pill class to get the rounded buttons.

Example
<div class="row g-3">
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-pill btn-lg">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-pill">Button</button>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-primary btn-sa-pill btn-sm">Button</button>
    </div>
</div>
Stroyka Admin — eCommerce Dashboard Template © 2021
Powered by HTML — Design by Kos