Buttons

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

Examples

Outline buttons

Soft buttons

Material-toned subtle fills:

Sizes

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

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.