Buttons
Use Front's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Bootstrap Buttons documentationButton 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>
Color variants
<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-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-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>