Design 21 Jan 2026

Buttons are the primary way users take actions in your application. Use semantic colors to convey intent (primary for main actions, danger for destructive actions, etc.).

Solid Buttons

Solid Buttons: High-emphasis buttons with colored backgrounds. Use for primary actions and important calls-to-action.

<button class="btn btn-primary">Primary</button>

Outline Buttons

Outline Buttons: Lower-emphasis buttons with colored borders and transparent backgrounds. Use for secondary actions or when you need lighter visual weight.

<button class="btn btn-outline-primary">Primary</button>

Link Buttons

Link Buttons: Styled like text links but with button behavior. Use for tertiary actions or navigation that looks like a link but needs button semantics.

<button class="btn btn-link">Link Button</button>

Button Sizes

Sizes: Three size options to match your UI density needs. Default size works for most cases.

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

Disabled State

Disabled Buttons: Use the disabled attribute to indicate buttons that cannot be interacted with. Disabled buttons have reduced opacity and no hover effects.

Disabled Solid Buttons

Disabled Outline Buttons

Disabled Link Button

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

Block Buttons (Full Width)

Block Buttons: Full-width buttons that span their container. Use for mobile interfaces, forms, or when you need a button to take up the entire available width.

<button class="btn btn-primary btn-block">Block button</button>

Common Usage Patterns

Real-world examples: Typical button combinations you'll use in forms, dialogs, and interfaces.

Form Actions (Primary + Secondary)

Destructive Action with Confirmation

Call to Action (CTA)

Multiple Actions

Button Groups

Button Groups: Group multiple buttons together with shared borders. Use for related actions or toggles like toolbar buttons or view switchers.

Horizontal Group

Solid Button Groups

Outline Button Groups

Vertical Group

Button Group Sizes

<div class="btn-group"><button class="btn btn-secondary">Left</button>...</div>
<div class="btn-group-vertical">...</div>

Dropdown Buttons

Dropdown Toggle: Buttons with dropdown arrows to indicate a menu or additional options. Add the .dropdown-toggle class to automatically display a dropdown arrow.

Solid Dropdowns

Outline Dropdowns

Dropdown Sizes

<button class="btn btn-primary dropdown-toggle">Dropdown</button>

Checkbox & Radio Button Groups

Button-style Checkboxes/Radios: Form controls styled as buttons. Use hidden .btn-check inputs with <label> elements styled as buttons for accessible toggle controls.

<input type="checkbox" class="btn-check" id="check1">
<label class="btn btn-primary" for="check1">Checkbox</label>

Pagination

Pagination: Navigation component for paging through content. Use .pagination container with .page-item and .page-link classes.

Basic Pagination

With Disabled States

Pagination Sizes

Grouped Numbers

<ul class="pagination"><li class="page-item active"><a class="page-link">1</a></li></ul>

Quick Reference

Base: .btn
Solid: .btn-{primary|secondary|success|danger|warning|info|light|dark}
Outline: .btn-outline-{primary|secondary|success|danger|warning|info|light|dark}
Link: .btn-link
Sizes: .btn-sm (small) | default (no class) | .btn-lg (large)
Layout: .btn-block (full width)
Groups: .btn-group (horizontal) | .btn-group-vertical | .btn-group-{sm|lg}
Dropdown: .dropdown-toggle (adds arrow indicator)
Checkbox/Radio: .btn-check (input) + .btn (label)
Pagination: .pagination > .page-item > .page-link | .page-item.active | .page-item.disabled
Pagination Sizes: .pagination-sm | .pagination-lg
State: disabled attribute (reduces opacity, disables interaction)
Usage: Combine classes like .btn.btn-primary.btn-lg or .btn.btn-outline-danger.btn-sm