Buttons

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

Bootstrap Buttons documentation

Usage 

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

Button types

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

                    
                      <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-soft-primary">Soft</button>
                      <button type="button" class="btn btn-ghost-primary">Ghost</button>
                      <button type="button" class="btn btn-link">link</button>

Button pilled 

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

Color variants New option 

                    
                      <button type="button" class="btn btn-primary">Primary</button>
                      <button type="button" class="btn btn-white">White</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-indigo">Indigo</button>
                      <button type="button" class="btn btn-light">Light</button>
                      <button type="button" class="btn btn-dark">Dark</button>
                      <button type="button" class="btn btn-navy">Navy</button>

Outline buttons

Use .btn-outline-*

                    
                      <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-indigo">Indigo</button>
                      <button type="button" class="btn btn-outline-light">Light</button>
                      <button type="button" class="btn btn-outline-dark">Dark</button>
                      <button type="button" class="btn btn-outline-navy">Navy</button>

Soft buttons

Use .btn-soft-*

                    
                      <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-indigo">Indigo</button>
                      <button type="button" class="btn btn-soft-light">Light</button>
                      <button type="button" class="btn btn-soft-dark">Dark</button>
                      <button type="button" class="btn btn-soft-navy">Navy</button>

Ghost buttons

Use .btn-ghost-*

                    
                      <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-indigo">Indigo</button>
                      <button type="button" class="btn btn-ghost-light">Light</button>
                      <button type="button" class="btn btn-ghost-dark">Dark</button>
                      <button type="button" class="btn btn-ghost-navy">Navy</button>

Button icons 

                    
                      <button type="button" class="btn btn-primary">
                        Add to Cart
                        <i class="fas fa-shopping-cart ml-1"></i>
                      </button>
                    
                  
                    
                      <button type="button" class="btn btn-primary btn-icon">
                        <i class="fas fa-eye"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon">
                        <i class="fas fa-plus"></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>

Button group 

                    
                      <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 sizes

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

                    
                      <button type="button" class="btn btn-primary btn-pill">Primary</button>
                    
                  
                    
                      <button type="button" class="btn btn-primary btn-icon btn-lg">
                        <i class="fas fa-shopping-cart"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon">
                        <i class="fas fa-shopping-cart"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon btn-sm">
                        <i class="fas fa-shopping-cart"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-icon btn-xs">
                        <i class="fas fa-shopping-cart"></i>
                      </button>

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.

                    
                      <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>