Search
Quick Commands
run:diagnostics Run all system checks
db:connect Connect to primary DB
cache:clear Clear application cache
users:list Show all active users
Notifications

Stay on top of recent system events and updates.

  • Notification avatar
    System Update Available

    Version 2.4.1 is ready to install with new features.

    2 minutes ago

  • AB
    New User Registration

    Alex Brown from Canada has joined the platform.

    15 minutes ago

  • Notification avatar
    Backup Completed

    Daily backup has been successfully completed.

    1 hour ago

  • Notification avatar
    Security Alert

    Unusual login activity detected from new location.

    3 hours ago

  • Notification avatar
    Monthly Report Ready

    Your analytics report for September is now available.

    Yesterday

  • MJ
    Server Maintenance

    Scheduled maintenance will begin at 2:00 AM EST.

    2 days ago

Action Another action Something else here
Separated link
Standard Solid Buttons

Standard Bootstrap buttons with the .btn-{color} classes.

<!-- Standard Solid Buttons -->
<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
Outline Buttons

Use .btn-outline-{color} for a hollow button style.

<!-- Outline Buttons -->
<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>
<!-- ...and so on for all colors -->
Soft Buttons (btn-soft)

Custom soft buttons with .btn-soft-{color}. Features an animated border on hover.

<!-- Soft Buttons -->
<button type="button" class="btn btn-soft-primary">
  <i class="material-symbols-rounded me-1">auto_awesome</i>
  Primary
</button>
<button type="button" class="btn btn-soft-danger">
  <i class="material-symbols-rounded me-1">report</i>
  Danger
</button>
Flat Buttons (btn-flat)

Custom flat buttons with .btn-flat. Press to see the click animation!

<!-- Flat Buttons -->
<button type="button" class="btn btn-flat btn-sm">Small</button>
<button type="button" class="btn btn-flat">Default</button>
<button type="button" class="btn btn-flat btn-lg">Large</button>

<!-- Compact Variant -->
<button type="button" class="btn btn-flat btn-flat-compact">
  <i class="material-symbols-rounded">save</i> Save
</button>
Button Sizes

Use .btn-xs, .btn-sm, .btn-lg, or .btn-xl classes for different sizes.

<!-- Button Sizes -->
<button type="button" class="btn btn-primary btn-xs">XS</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-xl">Extra Large</button>
Button States
<!-- Active State -->
<button type="button" class="btn btn-primary active">Active</button>

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

<!-- Loading State (Spinner) -->
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  Loading...
</button>
Icon Buttons (Icon Only)

Create icon-only buttons by adding .btn-icon. Use .rounded-circle or .rounded-pill for different shapes.

<!-- Standard Icon Button -->
<button type="button" class="btn btn-primary btn-icon">
  <i class="material-symbols-rounded">home</i>
</button>

<!-- Circular Icon Button -->
<button type="button" class="btn btn-success btn-icon rounded-circle">
  <i class="material-symbols-rounded">add</i>
</button>

<!-- Outline Icon Button -->
<button type="button" class="btn btn-outline-danger btn-icon">
  <i class="material-symbols-rounded">delete</i>
</button>
Icon Buttons (Icon with Label)

Add an icon to any button. The .btn-icon class provides alignment, but you can also just add an icon tag.

<!-- Icon before text -->
<button type="button" class="btn btn-info btn-icon">
  <i class="material-symbols-rounded">download</i>
  <span>Download</span>
</button>

<!-- Icon after text -->
<button type="button" class="btn btn-danger btn-icon">
  <span>Delete</span>
  <i class="material-symbols-rounded">delete</i>
</button>

<!-- Simple icon (no .btn-icon) -->
<button type="button" class="btn btn-primary">
  <i class="material-symbols-rounded me-1">add</i>
  New Item
</button>
Full Width & Link Buttons
<!-- Full Width (use .d-grid wrapper) -->
<div class="d-grid gap-2">
  <button type="button" class="btn btn-success">
    <i class="material-symbols-rounded me-1">done_all</i>
    Complete All Tasks
  </button>
</div>

<!-- Link Buttons -->
<button type="button" class="btn btn-link">Primary link</button>
<button type="button" class="btn btn-link text-success">Success link</button>
Checkbox Toggle Buttons
<!-- Checkbox Toggle Group -->
<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked>
  <label class="btn btn-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-primary" for="btncheck2">Checkbox 2</label>
</div>
Radio Toggle Buttons
<!-- Radio Toggle Group (use .btn-outline-* for a nice effect) -->
<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
  
  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>
Button Groups - Horizontal
<!-- Basic Group -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<!-- Sizing -->
<div class="btn-group btn-group-lg" role="group">
  <!-- ... buttons ... -->
</div>
Button Groups - Toolbar
<!-- Button Toolbar -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-secondary">...</button>
    <button type="button" class="btn btn-secondary">...</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">...</button>
  </div>
</div>
Button Groups - Vertical
<!-- Vertical Button Group -->
<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>
Button Groups - Dropdown
<!-- Split Button -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>
Icon Buttons - Icon on Top

Use d-flex flex-column align-items-center for icon-on-top buttons.

<!-- Icon on Top Button -->
<button type="button" class="btn btn-primary w-100 py-3 d-flex flex-column align-items-center">
  <i class="material-symbols-rounded mb-2" style="font-size: 48px;">account_circle</i>
  <strong>Login Form</strong>
</button>