Skip to main content

Buttons

Use boodoo's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

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>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Soft buttons

Material-toned subtle fills:

<button type="button" class="btn btn-soft-primary">Primary</button>
<button type="button" class="btn btn-soft-success">Success</button>
<button type="button" class="btn btn-soft-danger">Danger</button>
<button type="button" class="btn btn-soft-warning">Warning</button>
<button type="button" class="btn btn-soft-info">Info</button>

Sizes

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

States

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Outline</button>
<button type="button" class="btn btn-soft-primary">Soft</button>
<button type="button" class="btn btn-primary btn-lg ripple">Large with ripple</button>

Block buttons

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-outline-primary" type="button">Button</button>
</div>

Use .d-grid and a gap utility to create full-width, stacked buttons. The .btn-block class also works for a single full-width button.

Material ripple

Add the .ripple class (or the data-boodoo-ripple attribute) to any element to get a Material ink-ripple on click — no JS config needed.

Click me — ripple surface
<button type="button" class="btn btn-primary ripple"><span>Ripple button</span></button>
<div class="rounded-3 p-4 ripple border text-center w-50" data-boodoo-ripple><span>Click me — ripple surface</span></div>

Split buttons

Create split action buttons by combining a primary action button with a dropdown caret toggle inside .btn-split.

<div class="btn-split">
  <button type="button" class="btn btn-primary"><span>Publish Action</span></button>
  <button type="button" class="btn btn-primary btn-split-toggle" data-boodoo-toggle="dropdown" aria-expanded="false" aria-label="Toggle options"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><span>Save as draft</span></a></li>
    <li><a class="dropdown-item" href="#"><span>Schedule release</span></a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#"><span>Unpublish</span></a></li>
  </ul>
</div>

<div class="btn-split">
  <button type="button" class="btn btn-outline-success"><span>Export Data</span></button>
  <button type="button" class="btn btn-outline-success btn-split-toggle" data-boodoo-toggle="dropdown" aria-expanded="false" aria-label="Toggle format options"></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><span>Export as CSV</span></a></li>
    <li><a class="dropdown-item" href="#"><span>Export as JSON</span></a></li>
    <li><a class="dropdown-item" href="#"><span>Export as PDF</span></a></li>
  </ul>
</div>

Floating Action Buttons (FAB)

Inspired by Material Design, Floating Action Buttons promote primary actions on mobile and desktop web applications. Available with .btn-fab or extended with .fab-extended:

<!-- Circular FAB pinned to viewport corner -->
<button type="button" class="btn btn-primary btn-fab fab-bottom-end" aria-label="Compose">
  <span>+</span>
</button>

<!-- Extended FAB with icon + label -->
<button type="button" class="btn btn-primary btn-fab fab-extended fab-bottom-end">
  <span>✨</span>
  <span>Compose</span>
</button>

Dual-Engine "Class-First + Data-Attribute" Styling

In boodoo, you can write semantic HTML buttons with zero class spam using attributes:

<!-- Pure semantic HTML styled without class spam -->
<button role="button" data-boodoo-variant="primary" data-size="lg">
  <span>Semantic Primary Large</span>
</button>

<button role="button" data-boodoo-variant="outline-secondary">
  <span>Semantic Outline</span>
</button>