Silicon Silicon UI Kit
 Buy now

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