Documentation v1.1.0

Preview

Bootstrap Buttons

Start Vue Pro customizes the Bootstrap Buttons through the SASS variables in src/assets/sass/core/components/_variables.scss and adds additonal options in src/assets/sass/core/components/buttons/.

Base Buttons

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

Light Primary Secondary Success Info Warning Danger Dark

<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-primary">Primary</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>

Hover Effects

Use hover classess to set variouse effects for a button. For more info check out the Hover component docs.

Elevate up Elevate down Scale Rotate to end Rotate to start

<a href="#" class="btn btn-primary hover-elevate-up">Elevate up</a>

<a href="#" class="btn btn-primary hover-elevate-down">Elevate down</a>

<a href="#" class="btn btn-danger hover-scale">Scale</a>

<a href="#" class="btn btn-success hover-rotate-end">Rotate to end</a>

<a href="#" class="btn btn-warning hover-rotate-start">Rotate to start</a>

Light Style

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

Primary Secondary Success Info Warning Danger Dark

<a href="#" class="btn btn-light-primary">Primary</a>
<a href="#" class="btn btn-light-secondary">Secondary</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:

Light Primary Secondary Success Info Warning Danger Dark Body

<a href="#" class="btn btn-bg-light">Light</a>
<a href="#" class="btn btn-bg-primary">Primary</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>
<a href="#" class="btn bg-body">Body</a>

Outline Dashed Style

Use .btn-outline and .btn-outline-dashed Bootstrap 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 Secondary Success Info Warning Danger Dark

<a href="#" class="btn btn-outline btn-outline-dashed 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-secondary btn-active-light-secondary">Secondary</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-secondary btn-color-white">White</a>
<a href="#" class="btn btn-bg-light btn-color-primary">Primary</a>
<a href="#" class="btn btn-bg-light btn-color-secondary">Secondary</a>
<a href="#" class="btn btn-bg-secondary 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-secondary btn-color-gray-100">Gray-100</a>
<a href="#" class="btn btn-bg-secondary btn-color-gray-200">Gray-200</a>
<a href="#" class="btn btn-bg-secondary 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">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 White
</a>

<a href="#" class="btn btn-icon-primary btn-text-primary">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Primary
</a>

<a href="#" class="btn btn-icon-secondary btn-text-secondary">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Secondary
</a>

<a href="#" class="btn btn-icon-light btn-text-light">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Light
</a>

<a href="#" class="btn btn-icon-success btn-text-success">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Success
</a>

<a href="#" class="btn btn-icon-info btn-text-info">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Info
</a>

<a href="#" class="btn btn-icon-warning btn-text-warning">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Warning
</a>

<a href="#" class="btn btn-icon-danger btn-text-danger">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Danger
</a>

<a href="#" class="btn btn-icon-dark btn-text-dark">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Dark
</a>

<a href="#" class="btn btn-icon-muted btn-text-muted">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Muted
</a>

<a href="#" class="btn btn-icon-gray-100 btn-text-gray-100">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-100
</a>

<a href="#" class="btn btn-icon-gray-200 btn-text-gray-200">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-200
</a>

<a href="#" class="btn btn-icon-gray-300 btn-text-gray-300">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-300
</a>

<a href="#" class="btn btn-icon-gray-400 btn-text-gray-400">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-400
</a>

<a href="#" class="btn btn-icon-gray-500 btn-text-gray-500">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-500
</a>

<a href="#" class="btn btn-icon-gray-600 btn-text-gray-600">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-600
</a>

<a href="#" class="btn btn-icon-gray-700 btn-text-gray-700">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-700
</a>

<a href="#" class="btn btn-icon-gray-800 btn-text-gray-800">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-800
</a>

<a href="#" class="btn btn-icon-gray-900 btn-text-gray-900">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-900
</a>

Active Style

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

Light Primary Secondary Success Info Warning Danger Dark

<a href="#" class="btn btn-active-light">Light</a>
<a href="#" class="btn btn-active-primary">Primary</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 Secondary Success Info Warning Danger Dark

<a href="#" class="btn btn-active-light-primary">Primary</a>
<a href="#" class="btn btn-active-light-secondary">Secondary</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-text-white">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 White
</a>

<a href="#" class="btn btn-active-icon-primary btn-text-primary">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Primary
</a>

<a href="#" class="btn btn-active-icon-secondary btn-text-secondary">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Secondary
</a>

<a href="#" class="btn btn-active-icon-light btn-text-light">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Light
</a>

<a href="#" class="btn btn-active-icon-success btn-text-success">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Success
</a>

<a href="#" class="btn btn-active-icon-info btn-text-info">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Info
</a>

<a href="#" class="btn btn-active-icon-warning btn-text-warning">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Warning
</a>

<a href="#" class="btn btn-active-icon-danger btn-text-danger">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Danger
</a>

<a href="#" class="btn btn-active-icon-dark btn-text-dark">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Dark
</a>

<a href="#" class="btn btn-active-icon-muted btn-text-muted">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Muted
</a>

<a href="#" class="btn btn-active-icon-gray-100 btn-text-gray-100">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-100
</a>

<a href="#" class="btn btn-active-icon-gray-200 btn-text-gray-200">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-200
</a>

<a href="#" class="btn btn-active-icon-gray-300 btn-text-gray-300">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-300
</a>

<a href="#" class="btn btn-active-icon-gray-400 btn-text-gray-400">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-400
</a>

<a href="#" class="btn btn-active-icon-gray-500 btn-text-gray-500">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-500
</a>

<a href="#" class="btn btn-active-icon-gray-600 btn-text-gray-600">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-600
</a>

<a href="#" class="btn btn-active-icon-gray-700 btn-text-gray-700">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-700
</a>

<a href="#" class="btn btn-active-icon-gray-800 btn-text-gray-800">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-800
</a>

<a href="#" class="btn btn-active-icon-gray-900 btn-text-gray-900">
 <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
 Gray-900
</a>

Icons

Use our exclusive Keenicons set in conbination with buttons as shown below:

Caption Caption Caption Caption Caption Caption Caption

<a href="#" class="btn btn-primary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>

<a href="#" class="btn btn-secondary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>

<a href="#" class="btn btn-success">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>

<a href="#" class="btn btn-info">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>

<a href="#" class="btn btn-warning">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>

<a href="#" class="btn btn-danger">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>

<a href="#" class="btn btn-dark">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>


<a href="#" class="btn btn-icon btn-primary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

<a href="#" class="btn btn-icon btn-secondary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

<a href="#" class="btn btn-icon btn-success">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

<a href="#" class="btn btn-icon btn-info">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

<a href="#" class="btn btn-icon btn-warning">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

<a href="#" class="btn btn-icon btn-danger">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

<a href="#" class="btn btn-icon btn-dark">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>

Use Bootstrap Icons in conbination with buttons as shown below:

Caption 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-secondary"><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-secondary"><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 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-secondary"><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-secondary"><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 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-secondary"><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-secondary"><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 social is one the below options defined with $social-colors custom variable in src/assets/sass/core/components/_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-link Bootstrap 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-flush class to remove paddings, borders, background and rounded corners:

Flushed button

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

Use .btn-flex class to vertically center button inner elements with display: inline-flex and align-items: center:

Caption Some description

<a href="#" class="btn btn-flex btn-primary px-6">
    <i class="ki-duotone ki-graph-3 fs-2x"><span class="path1"></span><span class="path2"></span></i>
    <span class="d-flex flex-column align-items-start ms-2">
        <span class="fs-3 fw-bold">Caption</span>
        <span class="fs-7">Some description</span>
    </span>
</a>

Use .btn-strip-start and .btn-strip-end classes to reset padding edges and align to left or right:

<a href="#" class="btn btn-icon btn-primary btn-trim-start">
   <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i> 
</a>

<a href="#" class="btn btn-icon btn-primary btn-trim-end">
    <i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i> 
</a>

Getting Started

Base

Forms

Editors

General

Icons

Documentation v1.1.0

Bootstrap Buttons

Base Buttons

Hover Effects

Light Style

Background Style

Outline Dashed Style

Color Style

Icon & Text Color Styles

Active Style

Active Light Style

Active Color Style

Active Icon & Text Color Styles

Icons

Link Option

Utility Classes

Getting Started

Base

Forms

Editors

General

Icons

Documentation v1.1.0

No result found

Bootstrap Buttons

Base Buttons

Hover Effects

Light Style

Background Style

Outline Dashed Style

Color Style

Icon & Text Color Styles

Active Style

Active Light Style

Active Color Style

Active Icon & Text Color Styles

Icons

Social Buttons

Link Option

Utility Classes