# Buttons
Concept's button styles extend Bootstrap 5 with custom color overrides ensuring proper contrast. All dark buttons are configured with white text for optimal readability.
## Concept Button Colors
```html
```
### Concept Color Overrides
All buttons with dark backgrounds (`btn-dark`, `btn-secondary`, `btn-success`, `btn-danger`, `btn-info`, `btn-warning`) have forced white text color using `!important` to ensure visibility.
## Button Sizes
```html
```
## Button Variants
### Outline Buttons
```html
```
### Rounded Buttons
```html
```
### Icon Buttons
```html
```
## Button States
### Disabled State
```html
Disabled link
```
### Loading State
```html
```
### Toggle State
```html
```
## Button Groups
### Basic Group
```html
```
### Vertical Group
```html
```
### Button Toolbar
```html
```
## Concept Pagination Styles
Concept customizes Bootstrap pagination with specific colors and hover states:
```scss
// From Concept's _buttons.scss
.pagination {
.page-item {
&.active .page-link {
color: #fff !important;
background-color: #5969ff;
border-color: #5969ff;
}
.page-link {
color: #5969ff;
border-color: #dee2e6;
&:hover {
color: #fff !important;
background-color: #5969ff;
border-color: #5969ff;
}
}
}
}
```
## JavaScript Usage
### Dynamic Button Creation
```javascript
// Create button element
const button = document.createElement('button');
button.className = 'btn btn-primary';
button.textContent = 'Dynamic Button';
// Add click handler
button.addEventListener('click', () => {
console.log('Button clicked');
});
// Append to container
document.getElementById('button-container').appendChild(button);
```
### Button State Management
```javascript
// Loading state
function setLoading(button, loading = true) {
if (loading) {
button.disabled = true;
button.innerHTML = `
Loading...
`;
} else {
button.disabled = false;
button.textContent = 'Submit';
}
}
// Toggle active state
document.querySelectorAll('[data-toggle-group] .btn').forEach(btn => {
btn.addEventListener('click', function() {
// Remove active from siblings
this.parentElement.querySelectorAll('.btn').forEach(b => {
b.classList.remove('active');
});
// Add active to clicked
this.classList.add('active');
});
});
```
## Accessibility
### ARIA Labels
```html
```
### Keyboard Navigation
- All buttons must be keyboard accessible
- Use `tabindex="0"` for custom button elements
- Provide visual focus indicators
- Support Enter and Space key activation
## Best Practices
### DO:
- Use semantic button elements when possible
- Provide clear button labels
- Include hover and focus states
- Test keyboard navigation
- Use appropriate button sizes for touch
### DON'T:
- Don't use buttons for navigation (use links)
- Don't disable buttons without explanation
- Don't remove focus indicators
- Don't make touch targets too small
## Common Patterns
### Confirmation Buttons
```html