Buttons
Bravo enhances Bootstrap buttons with a neutral variant, extra size, common shapes, built-in loading states, and small but meaningful styling improvements.
Built-in loading states
The main enhancement is automatic loading state management — no more manual spinner handling:
<!-- Shows spinner + "Saving…" text when triggered -->
<button type="submit" class="btn btn-primary" data-bs-loader="Saving…">
Save
</button>
<!-- Shows spinner only (with SR-friendly "Loading…") -->
<button type="submit" class="btn btn-primary" data-bs-loader>
Submit
</button>
JavaScript API:
const btn = document.querySelector('#save');
btn.showLoader(); // Disables button, shows spinner
// ... async work ...
btn.hideLoader(); // Restores original state
New utilities
.btn-default — A neutral button that automatically adapts to light/dark themes (no more manually switching between btn-light and btn-dark).
.btn-xs — Extra small size for dense UIs like data tables or toolbars.
.btn-icon — Square aspect-ratio button that automatically matches the height of regular buttons (no manual width/height CSS needed).
.btn-rounded — Pill-shaped buttons. Combine with .btn-icon for perfect circles.
<!-- Neutral variant that adapts to theme -->
<button class="btn btn-default">Default</button>
<!-- Extra small size for compact UIs -->
<button class="btn btn-primary btn-xs">XS</button>
<!-- Square icon button with aspect ratio -->
<button class="btn btn-secondary btn-icon" aria-label="Settings">
<i class="bi bi-gear"></i>
</button>
<!-- Pill-shaped button -->
<button class="btn btn-outline-primary btn-rounded">Rounded</button>
Details
- Loading states: Automatically disable button, show spinner, handle ARIA attributes
- Dark mode aware: Hover/active states adjust for visibility
- Focus rings: Clean outline styling replaces Bootstrap's box-shadow
Auto-initialization: Buttons with data-bs-loader are automatically enhanced when added to the DOM, even dynamically. This is powered by Bravo's DynamicObserver.