UI Button | FabKin Admin & Dashboards Template

Button

Default Button

Create buttons in Bootstrap by adding the .btn class along with contextual classes like .btn-primary, .btn-secondary, or .btn-success to style the button.

Use the .btn class to create buttons in Bootstrap. Add the .rounded-pill class to give the button rounded edges, creating a pill-shaped button.

<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn rounded-pill btn-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-success">Success</button>
<button type="button" class="btn rounded-pill btn-info">Info</button>
<button type="button" class="btn rounded-pill btn-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-dark">Dark</button>
<button type="button" class="btn rounded-pill btn-link">Link</button>
<button type="button" class="btn rounded-pill btn-light">Light</button>

Light Button

Create light-themed buttons in Bootstrap by using the .btn-light class. You can also add variations like .btn-light-primary or .btn-light-secondary for different color accents.

Create light-themed, pill-shaped buttons in Bootstrap by combining the .btn-light-* class with .rounded-pill. This gives the button a light color and rounded edges for a sleek look.

<button type="button" class="btn btn-light-primary">Primary</button>
<button type="button" class="btn btn-light-secondary">Secondary</button>
<button type="button" class="btn btn-light-success">Success</button>
<button type="button" class="btn btn-light-info">Info</button>
<button type="button" class="btn btn-light-warning">Warning</button>
<button type="button" class="btn btn-light-danger">Danger</button>
<button type="button" class="btn btn-light-dark">Dark</button>
<button type="button" class="btn rounded-pill btn-light-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-light-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-light-success">Success</button>
<button type="button" class="btn rounded-pill btn-light-info">Info</button>
<button type="button" class="btn rounded-pill btn-light-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-light-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-light-dark">Dark</button>

Outline Button

Create outline buttons in Bootstrap using the .btn-outline-* class. This gives the button a border and transparent background, with color variations like .btn-outline-primary or .btn-outline-secondary.

Create outline buttons with rounded edges in Bootstrap by using the .btn-outline-* class along with .rounded-pill. This combines a transparent button with a sleek, pill-shaped design.

<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn rounded-pill btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-outline-success">Success</button>
<button type="button" class="btn rounded-pill btn-outline-info">Info</button>
<button type="button" class="btn rounded-pill btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-outline-dark">Dark</button>

Text Button

Create text-only buttons in Bootstrap using the .btn-text-* class. This removes the background and border, leaving only the text styled as a button.

<button type="button" class="btn btn-text-primary">Primary</button>
<button type="button" class="btn btn-text-secondary">Secondary</button>
<button type="button" class="btn btn-text-success">Success</button>
<button type="button" class="btn btn-text-info">Info</button>
<button type="button" class="btn btn-text-warning">Warning</button>
<button type="button" class="btn btn-text-danger">Danger</button>
<button type="button" class="btn btn-text-dark">Dark</button>

Buttons Size

Adjust button sizes in Bootstrap by using the size classes .btn-sm for smaller buttons and .btn-lg for larger buttons. The default size is applied when no size class is used.

<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- Normal Button -->
<button type="button" class="btn btn-primary">Large button</button>

<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

Social Buttons

Create social media buttons in Bootstrap by using the .btn class along with custom color classes for each platform, such as .btn-facebook, .btn-light-facebook,.btn-twitter or .btn-light-twitter, to match the respective brand styles.

Create social media outline buttons in Bootstrap using the .btn btn-outline-youtube class. This gives the button a transparent background with a colored border, styled for the YouTube brand.

<button type="button" class="btn btn-facebook icon-btn">
  <i class="ri-facebook-fill"></i>
</button>
<button type="button" class="btn btn-google icon-btn">
  <i class="ri-google-fill"></i>
</button>
<button type="button" class="btn btn-twitter icon-btn">
  <i class="ri-twitter-fill"></i>
</button>
<button type="button" class="btn btn-instagram icon-btn">
  <i class="ri-instagram-fill"></i>
</button>
<button type="button" class="btn btn-youtube icon-btn">
  <i class="ri-youtube-fill"></i>
</button>
<button type="button" class="btn btn-linkedin icon-btn">
  <i class="ri-linkedin-box-fill"></i>
</button>

<button type="button" class="btn btn-light-facebook icon-btn">
  <i class="ri-facebook-fill"></i>
</button>
<button type="button" class="btn btn-light-google icon-btn">
  <i class="ri-google-fill"></i>
</button>
<button type="button" class="btn btn-light-twitter icon-btn">
  <i class="ri-twitter-fill"></i>
</button>
<button type="button" class="btn btn-light-instagram icon-btn">
  <i class="ri-instagram-fill"></i>
</button>
<button type="button" class="btn btn-light-youtube icon-btn">
  <i class="ri-youtube-fill"></i>
</button>
<button type="button" class="btn btn-light-linkedin icon-btn">
  <i class="ri-linkedin-box-fill"></i>
</button>
<button type="button" class="btn btn-outline-facebook icon-btn">
    <i class="ri-facebook-fill"></i>
</button>
<button type="button" class="btn btn-outline-google icon-btn">
    <i class="ri-google-fill"></i>
</button>
<button type="button" class="btn btn-outline-twitter icon-btn">
    <i class="ri-twitter-fill"></i>
</button>
<button type="button" class="btn btn-outline-instagram icon-btn">
    <i class="ri-instagram-fill"></i>
</button>
<button type="button" class="btn btn-outline-youtube icon-btn">
    <i class="ri-youtube-fill"></i>
</button>
<button type="button" class="btn btn-outline-linkedin icon-btn">
    <i class="ri-linkedin-box-fill"></i>
</button>

Icon Buttons

Create icon buttons in Bootstrap by combining the .btn class with an icon, such as using an icon from a library like Remix Icon. This allows you to add visual elements alongside button text.

Create icon buttons in Bootstrap by using the .icon-btn class along with an icon from an icon library. This class styles the button to incorporate an icon, making it visually appealing and functional.

<button type="button" class="btn btn-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn rounded-pill btn-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn btn-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn rounded-pill btn-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn btn-light-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn rounded-pill btn-light-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn btn-light-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn rounded-pill btn-light-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn btn-outline-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn rounded-pill btn-outline-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn btn-outline-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn rounded-pill btn-outline-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn btn-primary icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-secondary icon-btn">
  <i class="ri-notification-4-line"></i>
</button>
<button type="button" class="btn btn-primary rounded-pill icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-secondary rounded-pill icon-btn">
  <i class="ri-notification-4-line"></i>
</button>

<button type="button" class="btn btn-light-primary icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-light-secondary icon-btn">
  <i class="ri-notification-4-line"></i>
</button>
<button type="button" class="btn btn-light-primary rounded-pill icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-light-secondary rounded-pill icon-btn">
  <i class="ri-notification-4-line"></i>
</button>

<button type="button" class="btn btn-outline-primary icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-outline-secondary icon-btn">
  <i class="ri-notification-4-line"></i>
</button>
<button type="button" class="btn btn-outline-primary rounded-pill icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-outline-secondary rounded-pill icon-btn">
  <i class="ri-notification-4-line"></i>
</button>

Icon Button Size

Create icon buttons in Bootstrap using the .icon-btn class. Adjust the size with .icon-btn-sm for smaller buttons, allowing for a compact design while incorporating icons.

<button type="button" class="btn btn-primary icon-btn-sm">
  <i class="ri-home-2-line"></i>
</button>
<button type="button" class="btn btn-primary icon-btn">
  <i class="ri-home-2-line"></i>
</button>
<button type="button" class="btn btn-primary icon-btn-lg">
  <i class="ri-home-2-line"></i>
</button>

Custom Toggle Buttons

Create custom toggle buttons in Bootstrap using the .btn-loader class to show a loading state. By default, use .indicator-label for button text, which changes to .indicator-progress after clicking to indicate the loading process.

<button type="button" class="btn btn-primary btn-loader">
  <span class="indicator-label">
    Submit
  </span>
  <span class="indicator-progress flex gap-2 align-items-center">
    <span>Loading...</span>
    <i class="ri-loader-2-fill"></i>
  </span>
</button>
<button type="button" class="btn btn-danger btn-loader">
  <span class="indicator-label">
    Submit
  </span>
  <span class="indicator-progress flex gap-2 align-items-center">
    <span>Please Wait...</span>
    <i class="ri-loader-2-fill"></i>
  </span>
</button>
<button type="button" class="btn btn-primary custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    <i class="ri-add-line align-bottom me-1"></i> Unfollow
  </span>
  <span class="icon-off">
    <i class="ri-user-unfollow-line align-bottom me-1"></i> Follow
  </span>
</button>
<button type="button" class="btn btn-primary custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    Inactive
  </span>
  <span class="icon-off">
    Active
  </span>
</button>
<button type="button" class="btn btn-dark icon-btn custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    <i class="ri-bookmark-line"></i>
  </span>
  <span class="icon-off">
    <i class="ri-bookmark-fill"></i>
  </span>
</button>
<button type="button" class="btn btn-success icon-btn custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    <i class="ri-heart-line"></i>
  </span>
  <span class="icon-off">
    <i class="ri-heart-fill"></i>
  </span>
</button>

Loading Animations

Add loading animations in Bootstrap using the .btn-loader class. Incorporate .spinner-grow or .spinner-border classes to show different types of spinners, providing visual feedback during loading processes.

<button type="button" class="btn btn-primary btn-loader">
  <span class="d-flex gap-2 align-items-center">
    <span class="flex-grow-1">
      Loading...
    </span>
    <span class="flex-shrink-0">
      <i class="ri-loader-2-fill"></i>
      <span class="visually-hidden">Loading...</span>
    </span>
  </span>
</button>
<button type="button" class="btn btn-secondary btn-loader">
  <span class="d-flex gap-2 align-items-center">
    <span class="flex-grow-1">
      Please Wait...
    </span>
    <span class="flex-shrink-0">
      <i class="ri-refresh-line"></i>
      <span class="visually-hidden">Please Wait...</span>
    </span>
  </span>
</button>
<button type="button" class="btn btn-primary">
  <span class="d-flex align-items-center">
    <span class="spinner-border spinner-border-sm me-2 flex-shrink-0" role="status">
      <span class="visually-hidden">Loading...</span>
    </span>
    <span class="flex-grow-1 ms-2">
      Loading...
    </span>
  </span>
</button>
<button type="button" class="btn btn-secondary">
  <span class="d-flex align-items-center">
    <span class="flex-grow-1 me-2">
      Wait...
    </span>
    <span class="spinner-border spinner-border-sm me-2 flex-shrink-0" role="status">
      <span class="visually-hidden">Wait...</span>
    </span>
  </span>
</button>
<button type="button" class="btn btn-success icon-btn">
  <span class="spinner-grow spinner-grow-sm flex-shrink-0" role="status">
    <span class="visually-hidden">Wait...</span>
  </span>
</button>
<button type="button" class="btn btn-success icon-btn">
  <span class="spinner-border spinner-border-sm flex-shrink-0" role="status">
    <span class="visually-hidden">Wait...</span>
  </span>
</button>

Full width button

Create a full-width button in Bootstrap by using the .w-100 class along with the .btn class. This makes the button stretch to fill its container, ensuring it occupies the entire width available.

<button class="btn btn-primary w-100" type="button">Button</button>
<button class="btn btn-secondary w-100" type="button">Button</button>

<button class="btn btn-light-primary w-100" type="button">Button</button>
<button class="btn btn-light-secondary w-100" type="button">Button</button>

<button class="btn btn-outline-primary w-100" type="button">Button</button>
<button class="btn btn-outline-secondary w-100" type="button">Button</button>

Campaign_Strategy.mp4

Button

Default Button

Light Button

Outline Button

Text Button

Buttons Size

Social Buttons

Icon Buttons

Icon Button Size

Custom Toggle Buttons

Loading Animations

Full width button

Theme Customization

Layout

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

RTL

LTR

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Icon

Sidebar Color:

Light

Dark

Primary Color

Ready to Begin Your Journey?

Ready to Begin Your Journey?

Item Back in Stock

Good news! The item you wanted is back in stock. Grab it before it’s gone again!

Donald liked your post

Birthday Reminder

Don’t forget! It’s Emily birthday tomorrow. Send them a message!

Richard followed you

Daniel invited you to join Website Redesign

Olivia liked your recent post

Mia shared a file in Marketing Campaign

Campaign_Strategy.mp4

Cart Items

Branded Crop Top

$499

Stop Watch

$318

Jeens Shoes

$2394

Solder Less T-shirt

$777

Mens T-shirt

$598

Paul Danielle

Button

Default Button

Light Button

Outline Button

Text Button

Buttons Size

Social Buttons

Icon Buttons

Icon Button Size

Custom Toggle Buttons

Loading Animations

Full width button

Theme Customization

Layout

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

RTL

LTR

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Icon

Sidebar Color:

Light

Dark

Primary Color