Buttons
Use Front's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Bootstrap Buttons documentationTypes
Use .btn-*, .btn-outline-*, .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-ghost-primary">Ghost</button>
<button type="button" class="btn btn-soft-primary">Soft</button>
<button type="button" class="btn btn-link">Link</button>
White
Outlined white color style is best suitable for secondary buttons.
Color variants
Predefined solid color button styles.
<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-*
<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-*
<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-*
<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.
<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 pilled
Use the .rounded-pill utility class to make buttons more rounded.
Radio button group
This group of buttons provide checkbox or radio style button toggling.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
Button icons
A contained button with an icon.
<button type="button" class="btn btn-primary">
Add to Cart
<i class="bi-basket ms-1"></i>
</button>
With fixed width and height.
<button type="button" class="btn btn-primary btn-icon">
<i class="bi-eye"></i>
</button>
<button type="button" class="btn btn-primary btn-icon">
<i class="bi-person"></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.
<button type="button" class="btn btn-primary btn-icon btn-lg">
<i class="bi-person"></i>
</button>
<button type="button" class="btn btn-primary btn-icon">
<i class="bi-person"></i>
</button>
<button type="button" class="btn btn-primary btn-icon btn-sm">
<i class="bi-person"></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="visually-hidden">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="visually-hidden">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>