Buttons

Restyled Bootstrap default buttons and custom developed button components
Default Bootstrap Buttons
Bootstrap Buttons:
button.btn.btn-primary(type='button') Primary
button.btn.btn-secondary(type='button') Secondary
button.btn.btn-success(type='button') Success
button.btn.btn-danger(type='button') Danger
button.btn.btn-warning(type='button') Warning
button.btn.btn-info(type='button') Info
button.btn.btn-light(type='button') Light
button.btn.btn-dark(type='button') Dark
button.btn.btn-link(type='button') Link
Bootstrap's default state-specific button styles have been styled to fit the SB Admin Pro theme.
Bootstrap Outline Buttons:
button.btn.btn-outline-primary(type='button') Primary
button.btn.btn-outline-secondary(type='button') Secondary
button.btn.btn-outline-success(type='button') Success
button.btn.btn-outline-danger(type='button') Danger
button.btn.btn-outline-warning(type='button') Warning
button.btn.btn-outline-info(type='button') Info
button.btn.btn-outline-light(type='button') Light
button.btn.btn-outline-dark(type='button') Dark
button.btn.btn-outline-link(type='button') Link
Outline button styles are also available by default from Bootstrap.
Custom Button Colors
Non-Contextual Button Colors:
button.btn.btn-red(type='button') Red
button.btn.btn-orange(type='button') Orange
button.btn.btn-yellow(type='button') Yellow
button.btn.btn-green(type='button') Green
button.btn.btn-teal(type='button') Teal
button.btn.btn-cyan(type='button') Cyan
button.btn.btn-blue(type='button') Blue
button.btn.btn-indigo(type='button') Indigo
button.btn.btn-purple(type='button') Purple
button.btn.btn-pink(type='button') Pink
By default, Bootstrap's buttons are semantically named. We've extended the Bootstrap framework to include non-contextual colors.
Non-Contextual Outline Button Colors:
button.btn.btn-outline-red(type='button') Red
button.btn.btn-outline-orange(type='button') Orange
button.btn.btn-outline-yellow(type='button') Yellow
button.btn.btn-outline-green(type='button') Green
button.btn.btn-outline-teal(type='button') Teal
button.btn.btn-outline-cyan(type='button') Cyan
button.btn.btn-outline-blue(type='button') Blue
button.btn.btn-outline-indigo(type='button') Indigo
button.btn.btn-outline-purple(type='button') Purple
button.btn.btn-outline-pink(type='button') Pink
SB Admin Pro's non-contextual color classes work with outline buttons as well!
Custom Icon Buttons
Icon Buttons (Feather Icons):
button.btn.btn-red.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-orange.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-yellow.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-green.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-teal.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-cyan.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-blue.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-indigo.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-purple.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-pink.btn-icon(type='button')
    i(data-feather='feather')
Our custom icon button component is circular by default, and looks great when used with Feather Icons, which are included with this theme.
Icon Buttons (Font Awesome Icons):
button.btn.btn-red.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-orange.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-yellow.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-green.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-teal.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-cyan.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-blue.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-indigo.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-purple.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-pink.btn-icon(type='button')
    i.fas.fa-flag
Use our icon buttons with Font Awesome as well!
Icon Buttons (Text):
button.btn.btn-red.btn-icon(type='button') S
button.btn.btn-orange.btn-icon(type='button') B
button.btn.btn-yellow.btn-icon(type='button') A
button.btn.btn-green.btn-icon(type='button') D
button.btn.btn-teal.btn-icon(type='button') M
button.btn.btn-cyan.btn-icon(type='button') I
button.btn.btn-blue.btn-icon(type='button') N
button.btn.btn-indigo.btn-icon(type='button') P
button.btn.btn-purple.btn-icon(type='button') R
button.btn.btn-pink.btn-icon(type='button') O
Icon buttons use a fixed height and width, so you can use them with short strings of text, one or two characters long.
Icon Buttons (Outline):
button.btn.btn-outline-red.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-orange.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-yellow.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-green.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-teal.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-cyan.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-blue.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-indigo.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-purple.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-pink.btn-icon(type='button')
    i(data-feather='feather')
Our custom icon button component is circular by default, and looks great when used with Feather Icons, which are included with this theme.
Custom Transparent Buttons
// Button Transparent (Light)
button.btn.btn-transparent-light(type='button') ...

// Button Transparent (Dark)
button.btn.btn-transparent-dark(type='button') ...

// Button Transparent (10% White Opacity)
button.btn.btn-white-10(type='button') ...
Our transparent button component is available to use in place of a button color. This color styling works with all of the other customization options available, including icon buttons.
Button Sizing
Sizing Options:
button.btn.btn-primary.btn-xs Extra Small
button.btn.btn-primary.btn-sm Small
button.btn.btn-primary Default
button.btn.btn-primary.btn-lg Large
button.btn.btn-primary.btn-xl Extra Large
Button sizes have been extended from Bootstrap defaults to include extra small and extra large buttons.
Sizing Options (Icon Buttons):
button.btn.btn-primary.btn-xs.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-sm.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-lg.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-xl.btn-icon
    i.fas.fa-flag
The custom icon button component is compatible with all of the button sizing options available.
Social Buttons
button.btn.btn-facebook
    i.fab.fa-facebook-f.me-2
    | Facebook
button.btn.btn-github
    i.fab.fa-github.me-2
    | GitHub
button.btn.btn-google
    i.fab.fa-google.me-2
    | Google
button.btn.btn-twitter
    i.fab.fa-twitter.me-2
    | Twitter
A select group of popular brands have had custom buttons styles added. The example above uses the Font Awesome brand icons in unison with the custom brand button styling.
Extending Buttons
Using Utility Classes vs. Overriding SCSS Variables

Utility classes are a quick and powerful way to extend the styling the button component. Specifically, border, shadow, text, and spacing utilities work well to customize a button.

Use utility classes to transform the style of a single button, or a small group of buttons. The best way to globally restyle the button component is by overriding button specific SCSS variables.

Square Buttons:
Append the .rounded-0 helper utility class onto any button and it will square the edges, resulting in a squared button.
Shadowed Buttons:
Append the .shadow-sm helper utility class onto any button and it will give the button a subtle shadow effect. You can use the .shadow and .shadow-lg utilities to add more shadow depth.
Pill Buttons:
Append the .rounded-pill helper utility class onto any button and it will give the button a pill effect. Note, this will have no effect on icon buttons which are already circular.
Deeper Customization:
Spacing utilities are especially useful when trying to achieve a certain look and feel for a specific button. In the above example, the .px-4 helper utility was added to the button component in order to create more negative space to the left and right sides of the button.
Multiple utility classes used together can drastically change the styling of a button. This should only be done in cases where only a single button, or a small group of buttons need to have a specific style. To modify buttons globally, it is best to override button SCSS variables.
Bootstrap Documentation Available

Buttons are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of buttons within your project, visit the official Bootstrap buttons documentation page.

Visit Bootstrap Buttons Docs