Button Group Component
Button Group Component: Create grouped button interfaces for related actions, toolbars, and segmented controls with consistent styling.
Live Examples
1. Basic Button Groups
Example Preview
2. Button Groups with Dropdowns
Example Preview
3. Segmented Button Groups
Example Preview
4. Toolbar Button Groups
Example Preview
5. Advanced Button Groups
Example Preview
JavaScript Methods
Methods:
// Initialize button group const buttonGroup = UIkit.buttonGroup(element, options); // Get button group instance const instance = UIkit.buttonGroup(element); // No specific methods for button group // Works with standard UIkit components
Example Usage:
<!-- HTML -->
<div id="myButtonGroup" class="uk-button-group">
<button class="uk-button uk-button-default">Button 1</button>
<button class="uk-button uk-button-default">Button 2</button>
<button class="uk-button uk-button-default">Button 3</button>
</div>
<button onclick="toggleActive()">Toggle Active State</button>
<!-- JavaScript -->
function toggleActive() {
const buttons = document.querySelectorAll('#myButtonGroup .uk-button');
buttons.forEach(button => {
button.classList.toggle('uk-active');
});
}
// Initialize with options (if needed)
const buttonGroup = UIkit.buttonGroup('#myButtonGroup', {
// Options here
});Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIKit Button Groups Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<style>
body { padding: 20px; }
.demo-section { margin-bottom: 40px; }
.button-group-demo { margin: 10px 0; }
</style>
</head>
<body>
<div class="uk-container">
<h1>Button Group System Demo</h1>
<!-- File Actions Group -->
<div class="demo-section">
<h3>File Actions</h3>
<div id="fileActions" class="uk-button-group button-group-demo">
<button class="uk-button uk-button-primary" onclick="openFile()">
<span class="uk-margin-small-right" uk-icon="icon: folder"></span>
Open
</button>
<button class="uk-button uk-button-primary" onclick="saveFile()">
<span class="uk-margin-small-right" uk-icon="icon: download"></span>
Save
</button>
<div class="uk-inline">
<button class="uk-button uk-button-primary" type="button">
<span uk-icon="icon: more"></span>
</button>
<div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;">
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#" onclick="saveAs()"><span uk-icon="icon: copy"></span> Save As</a></li>
<li><a href="#" onclick="exportFile()"><span uk-icon="icon: push"></span> Export</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#" onclick="printFile()"><span uk-icon="icon: print"></span> Print</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- View Controls Group -->
<div class="demo-section">
<h3>View Controls</h3>
<div id="viewControls" class="uk-button-group button-group-demo">
<button class="uk-button uk-button-default uk-active" onclick="changeView('grid')">
<span uk-icon="icon: grid"></span>
Grid
</button>
<button class="uk-button uk-button-default" onclick="changeView('list')">
<span uk-icon="icon: list"></span>
List
</button>
<button class="uk-button uk-button-default" onclick="changeView('details')">
<span uk-icon="icon: thumbnails"></span>
Details
</button>
</div>
<p id="currentView" class="uk-text-meta">Current view: Grid</p>
</div>
<!-- Filter Controls Group -->
<div class="demo-section">
<h3>Filter Controls</h3>
<div class="uk-button-group button-group-demo">
<button class="uk-button uk-button-secondary" onclick="filterAll()">
All Items
</button>
<button class="uk-button uk-button-secondary" onclick="filterToday()">
Today
</button>
<button class="uk-button uk-button-secondary" onclick="filterWeek()">
This Week
</button>
<button class="uk-button uk-button-secondary" onclick="filterMonth()">
This Month
</button>
<button class="uk-button uk-button-secondary" onclick="filterCustom()">
Custom Range
</button>
</div>
</div>
<!-- Form Actions Group -->
<div class="demo-section">
<h3>Form Actions</h3>
<div class="uk-button-group uk-width-1-1 button-group-demo">
<button class="uk-button uk-button-default uk-width-1-3" onclick="resetForm()">
Reset
</button>
<button class="uk-button uk-button-danger uk-width-1-3" onclick="cancelForm()">
Cancel
</button>
<button class="uk-button uk-button-success uk-width-1-3" onclick="submitForm()">
Submit
</button>
</div>
</div>
<!-- Control Buttons -->
<div class="uk-margin-top">
<button class="uk-button uk-button-primary" onclick="activateAll()">Activate All Buttons</button>
<button class="uk-button uk-button-secondary" onclick="deactivateAll()">Deactivate All Buttons</button>
</div>
</div>
<!-- UIKit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
<script>
// JavaScript Functions
function openFile() {
alert('Opening file...');
}
function saveFile() {
alert('File saved!');
}
function saveAs() {
alert('Save As dialog opened');
}
function exportFile() {
alert('Exporting file...');
}
function printFile() {
alert('Print dialog opened');
}
function changeView(view) {
// Update active button
const buttons = document.querySelectorAll('#viewControls .uk-button');
buttons.forEach(button => {
button.classList.remove('uk-active');
});
event.target.classList.add('uk-active');
// Update view text
document.getElementById('currentView').textContent = 'Current view: ' + view.charAt(0).toUpperCase() + view.slice(1);
alert('Changed to ' + view + ' view');
}
function filterAll() {
alert('Showing all items');
}
function filterToday() {
alert('Showing today's items');
}
function filterWeek() {
alert('Showing this week's items');
}
function filterMonth() {
alert('Showing this month's items');
}
function filterCustom() {
alert('Opening custom date range picker');
}
function resetForm() {
alert('Form reset');
}
function cancelForm() {
alert('Form cancelled');
}
function submitForm() {
alert('Form submitted successfully!');
}
function activateAll() {
const buttons = document.querySelectorAll('.uk-button-group .uk-button');
buttons.forEach(button => {
button.classList.add('uk-active');
});
}
function deactivateAll() {
const buttons = document.querySelectorAll('.uk-button-group .uk-button');
buttons.forEach(button => {
button.classList.remove('uk-active');
});
}
</script>
</body>
</html>Button Group Options
| Option | Type | Default | Description |
|---|---|---|---|
target | String | .uk-button | CSS selector for button elements |
activeClass | String | uk-active | CSS class for active state |
Custom Button Group Styles
/* Custom Button Group Styles */
.uk-button-group-rounded {
border-radius: 25px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.uk-button-group-rounded .uk-button {
border-radius: 0;
border: none;
}
.uk-button-group-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
padding: 2px;
}
.uk-button-group-gradient .uk-button {
background: white;
margin: 0 1px;
}
.uk-button-group-gradient .uk-button:hover {
background: #f8f8f8;
}
.uk-button-group-gradient .uk-button.uk-active {
background: #667eea;
color: white;
}
/* Outline Button Group */
.uk-button-group-outline .uk-button {
background: transparent;
border: 2px solid #1e87f0;
color: #1e87f0;
}
.uk-button-group-outline .uk-button:hover {
background: #1e87f0;
color: white;
}
.uk-button-group-outline .uk-button.uk-active {
background: #1e87f0;
color: white;
}
/* Pill Button Group */
.uk-button-group-pill {
border-radius: 50px;
overflow: hidden;
border: 2px solid #e5e5e5;
}
.uk-button-group-pill .uk-button {
border-radius: 0;
border: none;
border-right: 1px solid #e5e5e5;
}
.uk-button-group-pill .uk-button:last-child {
border-right: none;
}
/* Dark Theme Button Group */
.uk-button-group-dark {
background: #333;
border-radius: 6px;
padding: 5px;
}
.uk-button-group-dark .uk-button {
background: #444;
color: #fff;
}
.uk-button-group-dark .uk-button:hover {
background: #555;
}
.uk-button-group-dark .uk-button.uk-active {
background: #1e87f0;
}Best Practices:
- Group related actions together logically
- Use appropriate button styles for different action types
- Keep button groups compact and visually balanced
- Use icons to save space and improve recognition
- Ensure button groups are accessible with keyboard navigation
- Use active states to indicate current selection in segmented groups
- Consider mobile responsiveness when designing button groups
- Use tooltips for icon-only buttons to clarify their function
Accessibility Guidelines
- Ensure button groups have proper ARIA roles:
role="group"witharia-labeldescribing the group - For segmented controls, use
role="radiogroup"for radio-style groups - Manage focus within button groups with arrow keys
- Provide screen reader announcements for state changes
- Use
aria-pressed="true/false"for toggle buttons - Ensure sufficient color contrast for all button states
- Provide keyboard shortcuts for frequently used button groups
- Use
aria-current="page"for navigation button groups
