Documentation v8.0.25

Preview Purchase

Bootstrap Buttons

Metronic customizes the Bootstrap Buttons through the SASS variables in src/sass/_variables.scssand adds additonal options in src/sass/buttons/.

Base Buttons

Use .btn-{color}Bootstrap Button class to set base button base color defined with $theme-colorsmapped in src/sass/_variables.scss:

White Primary Light Secondary Success Info Warning Danger Dark

													<a href="#" class="btn btn-white">White</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-dark">Dark</a>
												

Light Style

Use .btn-light-{color}Bootstrap Button class to set a button's light style defined with $theme-light-colorsmapped in src/sass/_variables.scss:

Primary Success Info Warning Danger Dark

													<a href="#" class="btn btn-light-primary">Primary</a>
<a href="#" class="btn btn-light-success">Success</a>
<a href="#" class="btn btn-light-info">Info</a>
<a href="#" class="btn btn-light-warning">Warning</a>
<a href="#" class="btn btn-light-danger">Danger</a>
<a href="#" class="btn btn-light-dark">Dark</a>
												

Background Style

Use .btn-bg-{color}Bootstrap Button class to set a button's background color only without hover or active states:

White Primary Light Secondary Success Info Warning Danger Dark

													<a href="#" class="btn btn-bg-white">White</a>
<a href="#" class="btn btn-bg-primary">Primary</a>
<a href="#" class="btn btn-bg-light">Light</a>
<a href="#" class="btn btn-bg-secondary">Secondary</a>
<a href="#" class="btn btn-bg-success">Success</a>
<a href="#" class="btn btn-bg-info">Info</a>
<a href="#" class="btn btn-bg-warning">Warning</a>
<a href="#" class="btn btn-bg-danger">Danger</a>
<a href="#" class="btn btn-bg-dark">Dark</a>
												

Outline Dashed Style

Use .btn-outlineand .btn-outline-dashedBootstrap Button classes with the standard outline theme color .btn-outline-{color}and .btn-active-light-{color}classes to have a button with outline dashed border style:

Default Primary Success Info Warning Danger Dark

													<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-default me-2 mb-2">Default</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary">Primary</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success">Success</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-info btn-active-light-info">Info</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-warning btn-active-light-warning">Warning</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-danger btn-active-light-danger">Danger</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-dark btn-active-light-dark">Dark</a>
												

Color Style

Use .btn-color-{text-color}Bootstrap Button class to set a button's text and icon colors only:

White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900

													<a href="#" class="btn btn-bg-dark btn-color-white">White</a>
<a href="#" class="btn btn-bg-light btn-color-primary">Primary</a>
<a href="#" class="btn btn-bg-dark btn-color-secondary">Secondary</a>
<a href="#" class="btn btn-bg-dark btn-color-light">Light</a>
<a href="#" class="btn btn-bg-light btn-color-success">Success</a>
<a href="#" class="btn btn-bg-light btn-color-info">Info</a>
<a href="#" class="btn btn-bg-light btn-color-warning">Warning</a>
<a href="#" class="btn btn-bg-light btn-color-danger">Danger</a>
<a href="#" class="btn btn-bg-light btn-color-dark">Dark</a>
<a href="#" class="btn btn-bg-light btn-color-muted">Muted</a>
<a href="#" class="btn btn-bg-dark btn-color-gray-100">Gray-100</a>
<a href="#" class="btn btn-bg-dark btn-color-gray-200">Gray-200</a>
<a href="#" class="btn btn-bg-dark btn-color-gray-300">Gray-300</a>
<a href="#" class="btn btn-bg-light btn-color-gray-400">Gray-400</a>
<a href="#" class="btn btn-bg-light btn-color-gray-500">Gray-500</a>
<a href="#" class="btn btn-bg-light btn-color-gray-600">Gray-600</a>
<a href="#" class="btn btn-bg-light btn-color-gray-700">Gray-700</a>
<a href="#" class="btn btn-bg-light btn-color-gray-800">Gray-800</a>
<a href="#" class="btn btn-bg-light btn-color-gray-900">Gray-900</a>
												

Icon & Text Color Styles

Use .btn-icon-{text-color}and .btn-text-{text-color}Bootstrap Button classes to set a button's icon and text colors separately:

White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900

													<a href="#" class="btn btn-icon-white btn-text-white"><span class="svg-icon svg-icon-1"><svg>...</svg></span>White</a>
<a href="#" class="btn btn-icon-primary btn-text-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Primary</a>
<a href="#" class="btn btn-icon-secondary btn-text-secondary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Secondary</a>
<a href="#" class="btn btn-icon-light btn-text-light"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Light</a>
<a href="#" class="btn btn-icon-success btn-text-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Success</a>
<a href="#" class="btn btn-icon-info btn-text-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Info</a>
<a href="#" class="btn btn-icon-warning btn-text-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Warning</a>
<a href="#" class="btn btn-icon-danger btn-text-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Danger</a>
<a href="#" class="btn btn-icon-dark btn-text-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Dark</a>
<a href="#" class="btn btn-icon-muted btn-text-muted"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Muted</a>
<a href="#" class="btn btn-icon-gray-100 btn-text-gray-100"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-100</a>
<a href="#" class="btn btn-icon-gray-200 btn-text-gray-200"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-200</a>
<a href="#" class="btn btn-icon-gray-300 btn-text-gray-300"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-300</a>
<a href="#" class="btn btn-icon-gray-400 btn-text-gray-400"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-400</a>
<a href="#" class="btn btn-icon-gray-500 btn-text-gray-500"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-500</a>
<a href="#" class="btn btn-icon-gray-600 btn-text-gray-600"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-600</a>
<a href="#" class="btn btn-icon-gray-700 btn-text-gray-700"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-700</a>
<a href="#" class="btn btn-icon-gray-800 btn-text-gray-800"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-800</a>
<a href="#" class="btn btn-icon-gray-900 btn-text-gray-900"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-900</a>
												

Active Style

Use .btn-active-{color}Bootstrap Button class to set a button's color for active & hover states only:

White Primary Light Secondary Success Info Warning Danger Dark

													<a href="#" class="btn btn-active-white">White</a>
<a href="#" class="btn btn-active-primary">Primary</a>
<a href="#" class="btn btn-active-light">Light</a>
<a href="#" class="btn btn-active-secondary">Secondary</a>
<a href="#" class="btn btn-active-success">Success</a>
<a href="#" class="btn btn-active-info">Info</a>
<a href="#" class="btn btn-active-warning">Warning</a>
<a href="#" class="btn btn-active-danger">Danger</a>
<a href="#" class="btn btn-active-dark">Dark</a>
												

Active Light Style

Use .btn-active-light-{color}Bootstrap Button class to set a button's light color for active & hover states only:

Primary Success Info Warning Danger Dark

													<a href="#" class="btn btn-active-light-primary">Primary</a>
<a href="#" class="btn btn-active-light-success">Success</a>
<a href="#" class="btn btn-active-light-info">Info</a>
<a href="#" class="btn btn-active-light-warning">Warning</a>
<a href="#" class="btn btn-active-light-danger">Danger</a>
<a href="#" class="btn btn-active-light-dark">Dark</a>
												

Active Color Style

Use .btn-active-color-{color}Bootstrap Button class to set a button's text and icon colors for active and hover states only:

White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900

													<a href="#" class="btn btn-bg-light btn-active-color-white">White</a>
<a href="#" class="btn btn-bg-light btn-active-color-primary">Primary</a>
<a href="#" class="btn btn-bg-light btn-active-color-secondary">Secondary</a>
<a href="#" class="btn btn-bg-light btn-active-color-light">Light</a>
<a href="#" class="btn btn-bg-light btn-active-color-success">Success</a>
<a href="#" class="btn btn-bg-light btn-active-color-info">Info</a>
<a href="#" class="btn btn-bg-light btn-active-color-warning">Warning</a>
<a href="#" class="btn btn-bg-light btn-active-color-danger">Danger</a>
<a href="#" class="btn btn-bg-light btn-active-color-dark">Dark</a>
<a href="#" class="btn btn-bg-light btn-active-color-muted">Muted</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-100">Gray-100</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-200">Gray-200</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-300">Gray-300</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-400">Gray-400</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-500">Gray-500</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-600">Gray-600</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-700">Gray-700</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-800">Gray-800</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-900">Gray-900</a>
												

Active Icon & Text Color Styles

Use .btn-active-icon-{color}and .btn-active-text-{color}Bootstrap Button classes to set a button's icon and text colors separately for active and hover states:

White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900

													<a href="#" class="btn btn-active-icon-white btn-active-text-white"><span class="svg-icon svg-icon-1"><svg>...</svg></span>White</a>
<a href="#" class="btn btn-active-icon-primary btn-active-text-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Primary</a>
<a href="#" class="btn btn-active-icon-secondary btn-active-text-secondary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Secondary</a>
<a href="#" class="btn btn-active-icon-light btn-active-text-light"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Light</a>
<a href="#" class="btn btn-active-icon-success btn-active-text-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Success</a>
<a href="#" class="btn btn-active-icon-info btn-active-text-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Info</a>
<a href="#" class="btn btn-active-icon-warning btn-active-text-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Warning</a>
<a href="#" class="btn btn-active-icon-danger btn-active-text-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Danger</a>
<a href="#" class="btn btn-active-icon-dark btn-active-text-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Dark</a>
<a href="#" class="btn btn-active-icon-muted btn-active-text-muted"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Muted</a>
<a href="#" class="btn btn-active-icon-gray-100 btn-active-text-gray-100"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-100</a>
<a href="#" class="btn btn-active-icon-gray-200 btn-active-text-gray-200"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-200</a>
<a href="#" class="btn btn-active-icon-gray-300 btn-active-text-gray-300"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-300</a>
<a href="#" class="btn btn-active-icon-gray-400 btn-active-text-gray-400"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-400</a>
<a href="#" class="btn btn-active-icon-gray-500 btn-active-text-gray-500"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-500</a>
<a href="#" class="btn btn-active-icon-gray-600 btn-active-text-gray-600"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-600</a>
<a href="#" class="btn btn-active-icon-gray-700 btn-active-text-gray-700"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-700</a>
<a href="#" class="btn btn-active-icon-gray-800 btn-active-text-gray-800"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-800</a>
<a href="#" class="btn btn-active-icon-gray-900 btn-active-text-gray-900"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-900</a>
												

Icons

Use Duotune Svg Icons in conbination with buttons as shown below:

Caption Caption Caption Caption Caption Caption

													<a href="#" class="btn btn-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>

<a href="#" class="btn btn-icon btn-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
												

Use Bootstrap Icons in conbination with buttons as shown below:

Caption Caption Caption Caption Caption Caption

													<a href="#" class="btn btn-primary"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-success"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-info"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-warning"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-danger"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-dark"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>

<a href="#" class="btn btn-icon btn-primary"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
												

Use Font Awesome Icons in conbination with buttons as shown below:

Caption Caption Caption Caption Caption Caption

													<a href="#" class="btn btn-primary"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-success"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-info"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-warning"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-danger"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-dark"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>

<a href="#" class="btn btn-icon btn-primary"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
												

Use Line Awesome Icons in conbination with buttons as shown below:

Caption Caption Caption Caption Caption Caption

													<a href="#" class="btn btn-icon btn-primary"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-success"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-info"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-warning"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-danger"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-dark"><i class="las la-wallet fs-2 me-2"></i> Caption</a>

<a href="#" class="btn btn-icon btn-primary"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="las la-wallet fs-2 me-2"></i></a>
												

Use .btn-{social}and .btn-light-{social}classes with Font Awesome or Bootstrap Icons social icons for supporting buttons with social brand logos and colors.

Where socialis one the below options defined with $social-colorscustom variable in src/sass/_variables.scss.

facebook
google
twitter
instagram
youtube
linkedin

Other social colors can be added by referring to brandcolors.net.

													<a href="#" class="btn btn-icon btn-facebook me-5 "><i class="fab fa-facebook-f fs-4"></i></a>
<a href="#" class="btn btn-icon btn-google me-5 "><i class="fab fa-google fs-4"></i></a>
<a href="#" class="btn btn-icon btn-twitter me-5 "><i class="fab fa-twitter fs-4"></i></a>
<a href="#" class="btn btn-icon btn-instagram me-5 "><i class="fab fa-instagram fs-4"></i></a>
<a href="#" class="btn btn-icon btn-youtube me-5 "><i class="fab fa-youtube fs-4"></i></a>
<a href="#" class="btn btn-icon btn-linkedin me-5 "><i class="fab fa-linkedin fs-4"></i></a>

<a href="#" class="btn btn-icon btn-light-facebook me-5 "><i class="fab fa-facebook-f fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-google me-5 "><i class="fab fa-google fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-twitter me-5 "><i class="fab fa-twitter fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-instagram me-5 "><i class="fab fa-instagram fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-youtube me-5 "><i class="fab fa-youtube fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-linkedin me-5 "><i class="fab fa-linkedin fs-4"></i></a>
												

Link Option

Use .btn-linkBootstrap Button class with any other button classes to set a link buttons without side paddings:

Muted Gray 500 Primary Success Danger Warning

													<a href="#" class="btn btn-link btn-color-muted btn-active-color-primary me-5 mb-2">Muted</a>
<a href="#" class="btn btn-link btn-color-gray-500 btn-active-color-primary me-5 mb-2">Gray 500</a>
<a href="#" class="btn btn-link btn-color-info btn-active-color-primary me-5 mb-2">Primary</a>
<a href="#" class="btn btn-link btn-color-success btn-active-color-primary me-5 mb-2">Success</a>
<a href="#" class="btn btn-link btn-color-danger btn-active-color-primary me-5 mb-2">Danger</a>
<a href="#" class="btn btn-link btn-color-warning btn-active-color-primary me-5 mb-2">Warning</a>
												

Utility Classes

Use .btn-flushclass to remove paddings, borders, background and rounded corners:

Flushed button

													<a href="#" class="btn btn-flush">Flushed button</a>
												

Use .btn-flexclass to vertically center button inner elements with display: inline-flexand align-items: center:

Caption Some description

													<a href="#" class="btn btn-flex btn-primary px-6">
    <span class="svg-icon svg-icon-2x"><svg>...</svg></span>
    <span class="d-flex flex-column align-items-start ms-2">
        <span class="fs-3 fw-bolder">Caption</span>
        <span class="fs-7">Some description</span>
    </span>
</a>
												