# Buttons Buttons are essential interactive elements. Concept extends Bootstrap's button styles with additional variants and states. ## Basic Usage ```html ``` ## 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 ``` ## Custom Button Styles ### Gradient Buttons ```scss .btn-gradient-primary { background: linear-gradient(135deg, $primary 0%, darken($primary, 10%) 100%); border: none; color: $white; &:hover { background: linear-gradient(135deg, darken($primary, 5%) 0%, darken($primary, 15%) 100%); } } ``` ### Social Media Buttons ```html ``` ## 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 ``` ### Button with Dropdown ```html
```