Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Button States in Bootstrap 5
Button States: Different interactive states including active, disabled, and loading states.
Active State
The active state appears when a button is being pressed or is in an active/toggled state.
Active Button Examples
<!-- Active State Button -->
<button type="button" class="btn btn-primary active">
Active Primary
</button>
<button type="button" class="btn btn-outline-success active">
Active Outline
</button>
<!-- Radio Button Group with Active State -->
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="options" id="option1" checked>
<label class="btn btn-outline-primary" for="option1">Radio 1</label>
<input type="radio" class="btn-check" name="options" id="option2">
<label class="btn btn-outline-primary" for="option2">Radio 2</label>
<input type="radio" class="btn-check" name="options" id="option3">
<label class="btn btn-outline-primary" for="option3">Radio 3</label>
</div>Disabled State
Disabled buttons are non-interactive and appear faded to indicate they cannot be clicked.
Disabled Button Examples
<!-- Disabled Buttons -->
<button type="button" class="btn btn-primary" disabled>
Disabled Primary
</button>
<button type="button" class="btn btn-outline-danger" disabled>
Disabled Outline
</button>
<button type="button" class="btn btn-link" disabled>
Disabled Link
</button>
<!-- Disabled Button with Icon -->
<button type="button" class="btn btn-primary btn-lg" disabled>
<i class="bi bi-lock me-2"></i>
Large Disabled
</button>Loading State
Loading states indicate that an action is in progress after a button is clicked.
Loading Button Examples
<!-- Loading Button with Spinner -->
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm me-2"
role="status"></span>
Loading...
</button>
<!-- Growing Spinner -->
<button class="btn btn-success" disabled>
<span class="spinner-grow spinner-grow-sm me-2"
role="status"></span>
Processing...
</button>
<!-- Loading Outline Button -->
<button class="btn btn-outline-warning" disabled>
<span class="spinner-border spinner-border-sm me-2"
role="status"></span>
Please wait
</button>
<!-- Large Loading Button -->
<button class="btn btn-danger btn-lg" disabled>
<span class="spinner-border spinner-border-sm me-2"
role="status"></span>
Deleting...
</button>Focus State
The focus state appears when a button receives keyboard focus, important for accessibility.
Focus State Examples
<!-- Focus State (CSS Simulation) -->
<style>
.focus {
position: relative;
}
.focus::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid #0d6efd;
border-radius: 6px;
animation: pulse 2s infinite;
}
/* Bootstrap's default focus uses box-shadow */
.btn:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
</style>
<button class="btn btn-primary focus">Focused Button</button>Hover State
Hover states provide visual feedback when users mouse over buttons.
Hover State Examples
<!-- Hover State Enhancement -->
<style>
/* Default Bootstrap hover */
.btn:hover {
transform: translateY(-1px);
}
/* Enhanced hover with transition */
.btn {
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-outline-primary:hover {
background-color: #0d6efd;
color: white;
}
</style>
<button class="btn btn-primary">Hover over me</button>Toggle Buttons
Toggle buttons maintain an active state until clicked again.
Toggle Button Examples
<!-- Toggle Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="button">
Toggle Button
</button>
<!-- Toggle Checkboxes -->
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">
Checkbox 1
</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">
Checkbox 2
</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">
Checkbox 3
</label>
</div>State Management
| State | CSS Class | Attribute | User Action | Accessibility |
|---|---|---|---|---|
| Active | .active | aria-pressed="true" | Click, tap, or toggle | Screen readers announce "pressed" |
| Disabled | :disabled | disabled attribute | None (non-interactive) | Screen readers skip disabled buttons |
| Focus | :focus | tabindex="0" | Tab key navigation | Essential for keyboard users |
| Hover | :hover | N/A | Mouse over | Visual feedback only |
| Loading | Custom class | aria-busy="true" | After click, during process | Screen readers announce "busy" |
Accessibility Best Practices
Button State Accessibility
- ✅ Always include
:focusstyles for keyboard navigation - ✅ Use
disabledattribute (not just class) for disabled buttons - ✅ For toggle buttons, use
aria-pressedattribute - ✅ For loading buttons, use
aria-busy="true" - ✅ Ensure sufficient color contrast for all states
- ✅ Provide text alternatives for state changes
- ✅ Test with screen readers and keyboard only
