UI Button | Urbix Admin & Dashboards Template

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>

Shadow 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-shadow-primary">Primary</button>
<button type="button" class="btn btn-shadow-secondary">Secondary</button>
<button type="button" class="btn btn-shadow-success">Success</button>
<button type="button" class="btn btn-shadow-info">Info</button>
<button type="button" class="btn btn-shadow-warning">Warning</button>
<button type="button" class="btn btn-shadow-danger">Danger</button>
<button type="button" class="btn btn-shadow-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>

Urbix

Campaign_Strategy.mp4

Default Button

Light Button

Outline Button

Shadow Button

Text Button

Buttons Size

Social Buttons

Icon Buttons

Icon Button Size

Custom Toggle Buttons

Loading Animations

Full width button

Layout:

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

LTR

RTL

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Medium

Icon

Icon hover

Sidebar Color:

Light

Dark

Primary Color

Item Back in Stock

Donald

Birthday Reminder

Richard

Olivia liked your recent post

Mia shared a file in Marketing Campaign

Campaign_Strategy.mp4

Cart Items

Stop Watch

$318

Jeens Shoes

$399

Solder Less T-shirt

$777

Order Total:

Jaydon Levin

Button

Default Button

Light Button

Outline Button

Shadow Button

Text Button

Buttons Size

Social Buttons

Icon Buttons

Icon Button Size

Custom Toggle Buttons

Loading Animations

Full width button

Layout:

Vertical

Horizontal

Semi Box

Content Width:

Default

Box

Layout Direction:

LTR

RTL

Layout Mode:

Light

Dark

System

Sidebar Size:

Default

Medium

Icon

Icon hover

Sidebar Color:

Light

Dark

Primary Color