Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap docs

## Solid (default)

    <!-- Primary solid button -->
    <button type="button" class="btn btn-primary">Primary</button>

    <!-- Secondary solid button -->
    <button type="button" class="btn btn-secondary">Secondary</button>

    <!-- Success solid button -->
    <button type="button" class="btn btn-success">Success</button>

    <!-- Danger solid button -->
    <button type="button" class="btn btn-danger">Danger</button>

    <!-- Warning solid button -->
    <button type="button" class="btn btn-warning">Warning</button>

    <!-- Info solid button -->
    <button type="button" class="btn btn-info">Info</button>

    <!-- Light solid button -->
    <button type="button" class="btn btn-light">Info</button>

    <!-- Dark solid button -->
    <button type="button" class="btn btn-dark">Dark</button>

    <!-- Link button -->
    <button type="button" class="btn btn-link">Link</button>

## Outline

    <!-- Primary outline button -->
    <button type="button" class="btn btn-outline-primary">Primary</button>

    <!-- Secondary outline button -->
    <button type="button" class="btn btn-outline-secondary">Secondary</button>

    <!-- Success outline button -->
    <button type="button" class="btn btn-outline-success">Success</button>

    <!-- Danger outline button -->
    <button type="button" class="btn btn-outline-danger">Danger</button>

    <!-- Warning outline button -->
    <button type="button" class="btn btn-outline-warning">Warning</button>

    <!-- Info outline button -->
    <button type="button" class="btn btn-outline-info">Info</button>

    <!-- Light outline button -->
    <button type="button" class="btn btn-outline-light">Info</button>

    <!-- Dark outline button -->
    <button type="button" class="btn btn-outline-dark">Dark</button>

## Buttons with shadow

    <!-- Primary button with shadow -->
    <button type="button" class="btn btn-primary shadow-primary">Primary</button>

    <!-- Secondary button with shadow -->
    <button type="button" class="btn btn-secondary shadow-secondary">Secondary</button>

    <!-- Success button with shadow -->
    <button type="button" class="btn btn-success shadow-success">Success</button>

    <!-- Danger button with shadow -->
    <button type="button" class="btn btn-danger shadow-danger">Danger</button>

    <!-- Warning button with shadow -->
    <button type="button" class="btn btn-warning shadow-warning">Warning</button>

    <!-- Info button with shadow -->
    <button type="button" class="btn btn-info shadow-info">Info</button>

    <!-- Light button with shadow -->
    <button type="button" class="btn btn-light shadow-secondary">Info</button>

    <!-- Dark button with shadow -->
    <button type="button" class="btn btn-dark shadow-dark">Dark</button>

## Gradient buttons

    <!-- Primary gradient button -->
    <button type="button" class="btn btn-primary bg-gradient">Primary</button>

    <!-- Success gradient button -->
    <button type="button" class="btn btn-success bg-gradient">Success</button>

    <!-- Danger gradient button -->
    <button type="button" class="btn btn-danger bg-gradient">Danger</button>

    <!-- Warning gradient button -->
    <button type="button" class="btn btn-warning bg-gradient">Warning</button>

    <!-- Info gradient button -->
    <button type="button" class="btn btn-info bg-gradient">Info</button>

    <!-- Dark gradient button -->
    <button type="button" class="btn btn-dark bg-gradient">Dark</button>

## Icons

    <!-- Secondary outline button with text and icon -->
    <button class="btn btn-outline-secondary" type="button">
      <i class="bx bx-user fs-lg me-2"></i>
      Profile
    </button>

    <!-- Secondary solid icon button -->
    <button class="btn btn-secondary btn-icon" type="button">
      <i class="bx bx-upload"></i>
    </button>

    <!-- Danger outline icon button -->
    <button class="btn btn-outline-danger btn-icon" type="button">
      <i class="bx bx-error-circle"></i>
    </button>

    <!-- Success solid icon button -->
    <button class="btn btn-success btn-icon" type="button">
      <i class="bx bx-check-circle"></i>
    </button>

    <!-- Warning circle solid icon button -->
    <button class="btn btn-warning btn-icon rounded-circle" type="button">
      <i class="bx bx-star"></i>
    </button>

    <!-- Info circle outline icon button -->
    <button class="btn btn-outline-info btn-icon rounded-circle" type="button">
      <i class="bx bx-bell"></i>
    </button>

## Market buttons

    <!-- App Store button -->
    <a href="#" class="btn btn-dark btn-lg px-3 py-2">
      <img src="assets/img/market/appstore-light.svg" class="light-mode-img" width="124" alt="App Store">
      <img src="assets/img/market/appstore-dark.svg" class="dark-mode-img" width="124" alt="App Store">
    </a>

    <!-- Google Play button -->
    <a href="#" class="btn btn-dark btn-lg px-3 py-2">
      <img src="assets/img/market/googleplay-light.svg" class="light-mode-img" width="139" alt="Google Play">
      <img src="assets/img/market/googleplay-dark.svg" class="dark-mode-img" width="139" alt="Google Play">
    </a>

## Shapes

    <!-- Rounded solid button -->
    <button type="button" class="btn btn-primary">Rounded</button>

    <!-- Pill solid button -->
    <button type="button" class="btn btn-primary rounded-pill">Pill button</button>

    <!-- Square solid button -->
    <button type="button" class="btn btn-primary rounded-0">Square</button>

    <!-- Rounded outline button -->
    <button type="button" class="btn btn-outline-primary">Rounded</button>

    <!-- Pill outline button -->
    <button type="button" class="btn btn-outline-primary rounded-pill">Pill button</button>

    <!-- Square outline button -->
    <button type="button" class="btn btn-outline-primary rounded-0">Square</button>

## Sizes

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

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

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

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

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

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

    <!-- Block solid button -->
    <button type="button" class="btn btn-primary w-100">Block level button</button>

    <!-- Block outline button -->
    <button type="button" class="btn btn-outline-primary w-100">Block level button</button>

## States

    <!-- Active primary button -->
    <button type="button" class="btn btn-primary active">Active</button>

    <!-- Active secondary button -->
    <button type="button" class="btn btn-secondary active">Active</button>

    <!-- Disabled primary button -->
    <button type="button" class="btn btn-primary disabled">Disabled</button>

    <!-- Disabled secondary button -->
    <button type="button" class="btn btn-secondary disabled">Disabled</button>

    <!-- Button toggle -->
    <button type="button" class="btn btn-primary" data-bs-toggle="button">Button toggle</button>

    <!-- Loading state: Primary button + border spinner -->
    <button type="button" class="btn btn-primary pe-none">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
        <span class="visually-hidden">Loading...</span>
      </span>
    </button>

    <!-- Loading state: Secondary button + growing spinner -->
    <button type="button" class="btn btn-secondary pe-none">
      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true">
        <span class="visually-hidden">Loading...</span>
      </span>
    </button>

Top