Button Component
Button Component: Buttons are interactive elements that allow users to perform actions. UIKit provides a comprehensive button system with various styles, sizes, and states.
Live Examples
1. Basic Button Styles
Example Preview
2. Button Sizes
Example Preview
3. Buttons with Icons
Example Preview
4. Button States
Example Preview
Hover States:
Focus States:
5. Button Groups
Example Preview
Button Classes Reference
Style Classes
| Class | Description | Preview |
|---|---|---|
.uk-button | Base button class | |
.uk-button-default | Default style (white) | |
.uk-button-primary | Primary style (blue) | |
.uk-button-secondary | Secondary style (dark) | |
.uk-button-danger | Danger style (red) | |
.uk-button-text | Text-only button | |
.uk-button-link | Link-style button |
Size Classes
| Class | Description | Preview |
|---|---|---|
.uk-button-large | Large size button | |
(default) | Default size button | |
.uk-button-small | Small size button | |
.uk-button-xsmall | Extra small button |
State Classes
| Class | Description | Usage |
|---|---|---|
.uk-active | Active/selected state | uk-button uk-button-primary uk-active |
[disabled] | Disabled state attribute | <button disabled> |
.uk-button-group | Button group container | <div class="uk-button-group"> |
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 Buttons Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<style>
body { padding: 20px; background: #f8f9fa; }
.demo-section {
background: white;
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.button-showcase {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 8px;
background: #fafafa;
}
</style>
</head>
<body>
<div class="uk-container">
<h1 class="uk-heading-primary">UIKit Buttons Demo</h1>
<!-- E-commerce Product Actions -->
<div class="demo-section">
<h2>E-commerce Product Actions</h2>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">iPhone 15 Pro Max</h3>
</div>
<div class="uk-card-body">
<div class="uk-grid-large" uk-grid>
<div class="uk-width-1-2@m">
<img src="iphone.jpg" alt="iPhone" class="uk-border-rounded" style="width: 100%;">
</div>
<div class="uk-width-1-2@m">
<h4 class="uk-heading-divider">$1,199.00</h4>
<p>The ultimate iPhone with Titanium design, A17 Pro chip, and advanced camera system.</p>
<div class="uk-margin-medium">
<h5>Storage Options:</h5>
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-active">256GB</button>
<button class="uk-button uk-button-default">512GB</button>
<button class="uk-button uk-button-default">1TB</button>
</div>
</div>
<div class="uk-margin-medium">
<h5>Color:</h5>
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-active">Natural Titanium</button>
<button class="uk-button uk-button-default">Blue Titanium</button>
<button class="uk-button uk-button-default">White Titanium</button>
<button class="uk-button uk-button-default">Black Titanium</button>
</div>
</div>
<div class="uk-margin-large">
<div class="uk-flex uk-flex-middle uk-flex-between">
<div>
<button class="uk-button uk-button-primary uk-button-large">
<span uk-icon="icon: cart" class="uk-margin-small-right"></span>
Add to Cart
</button>
</div>
<div>
<button class="uk-button uk-button-secondary">
<span uk-icon="icon: heart"></span>
Wishlist
</button>
<button class="uk-button uk-button-default">
<span uk-icon="icon: compare"></span>
Compare
</button>
</div>
</div>
</div>
<div class="uk-grid-small uk-child-width-1-2" uk-grid>
<div>
<button class="uk-button uk-button-default uk-width-1-1">
<span uk-icon="icon: credit-card"></span>
Buy Now
</button>
</div>
<div>
<button class="uk-button uk-button-text uk-width-1-1">
<span uk-icon="icon: info"></span>
More Details
</button>
</div>
</div>
</div>
</div>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<button class="uk-button uk-button-text">
<span uk-icon="icon: arrow-left"></span>
Previous Product
</button>
</div>
<div>
<button class="uk-button uk-button-text">
Next Product
<span uk-icon="icon: arrow-right" class="uk-margin-small-left"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="demo-section">
<h2>Form Actions & Dialog Buttons</h2>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Edit User Profile</h3>
</div>
<div class="uk-card-body">
<form>
<div class="uk-margin">
<label class="uk-form-label" for="name">Full Name</label>
<input class="uk-input" id="name" type="text" placeholder="Enter your name">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="email">Email Address</label>
<input class="uk-input" id="email" type="email" placeholder="Enter your email">
</div>
<div class="uk-margin">
<label class="uk-form-label" for="bio">Bio</label>
<textarea class="uk-textarea" id="bio" rows="4" placeholder="Tell us about yourself"></textarea>
</div>
</form>
</div>
<div class="uk-card-footer">
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<button class="uk-button uk-button-danger">
<span uk-icon="icon: trash"></span>
Delete Account
</button>
</div>
<div>
<button class="uk-button uk-button-default">
Cancel
</button>
<button class="uk-button uk-button-primary">
<span uk-icon="icon: check" class="uk-margin-small-right"></span>
Save Changes
</button>
</div>
</div>
</div>
</div>
<!-- Confirmation Dialog -->
<div class="uk-margin-top">
<div class="uk-card uk-card-secondary">
<div class="uk-card-body">
<h4 class="uk-card-title">Are you sure?</h4>
<p>This action cannot be undone. All data will be permanently deleted.</p>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-default uk-margin-small-right">Cancel</button>
<button class="uk-button uk-button-danger">Delete Permanently</button>
</div>
</div>
</div>
</div>
</div>
<!-- Dashboard Action Buttons -->
<div class="demo-section">
<h2>Dashboard Action Buttons</h2>
<div class="button-grid">
<div class="button-showcase">
<button class="uk-button uk-button-primary uk-button-large uk-margin-bottom">
<span uk-icon="icon: plus" class="uk-margin-small-right"></span>
Create New
</button>
<span class="uk-text-meta">Primary Action</span>
</div>
<div class="button-showcase">
<button class="uk-button uk-button-default uk-button-large uk-margin-bottom">
<span uk-icon="icon: upload" class="uk-margin-small-right"></span>
Upload File
</button>
<span class="uk-text-meta">Secondary Action</span>
</div>
<div class="button-showcase">
<button class="uk-button uk-button-danger uk-button-large uk-margin-bottom">
<span uk-icon="icon: trash" class="uk-margin-small-right"></span>
Delete All
</button>
<span class="uk-text-meta">Destructive Action</span>
</div>
<div class="button-showcase">
<button class="uk-button uk-button-secondary uk-button-large uk-margin-bottom" disabled>
<span uk-icon="icon: lock" class="uk-margin-small-right"></span>
Locked Action
</button>
<span class="uk-text-meta">Disabled State</span>
</div>
</div>
<!-- Quick Actions -->
<div class="uk-margin-top">
<h4>Quick Actions</h4>
<div class="uk-flex uk-flex-wrap uk-flex-center uk-flex-middle">
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right">
<span uk-icon="icon: download"></span>
Export
</button>
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right">
<span uk-icon="icon: print"></span>
Print
</button>
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right">
<span uk-icon="icon: share"></span>
Share
</button>
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right">
<span uk-icon="icon: copy"></span>
Duplicate
</button>
<button class="uk-button uk-button-default uk-button-small">
<span uk-icon="icon: settings"></span>
Settings
</button>
</div>
</div>
</div>
<!-- Pagination with Buttons -->
<div class="demo-section">
<h2>Pagination & Navigation</h2>
<div class="uk-card uk-card-default">
<div class="uk-card-body">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-button-group">
<button class="uk-button uk-button-default">
<span uk-icon="icon: chevron-left"></span>
Previous
</button>
<button class="uk-button uk-button-default uk-active">1</button>
<button class="uk-button uk-button-default">2</button>
<button class="uk-button uk-button-default">3</button>
<button class="uk-button uk-button-default">4</button>
<button class="uk-button uk-button-default">5</button>
<button class="uk-button uk-button-default">
Next
<span uk-icon="icon: chevron-right" class="uk-margin-small-left"></span>
</button>
</div>
</div>
<div class="uk-margin-top uk-text-center">
<span class="uk-text-meta">Showing 1-10 of 50 results</span>
</div>
</div>
</div>
<!-- Step Navigation -->
<div class="uk-margin-top">
<div class="uk-card uk-card-secondary">
<div class="uk-card-body">
<h4 class="uk-card-title">Setup Wizard - Step 2 of 4</h4>
<p>Configure your account settings.</p>
<div class="uk-flex uk-flex-between">
<button class="uk-button uk-button-default">
<span uk-icon="icon: arrow-left"></span>
Back
</button>
<div>
<button class="uk-button uk-button-text uk-margin-small-right">Skip</button>
<button class="uk-button uk-button-primary">
Next Step
<span uk-icon="icon: arrow-right" class="uk-margin-small-left"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Loading & Progress States -->
<div class="demo-section">
<h2>Loading & Progress States</h2>
<div class="uk-grid-small uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body uk-text-center">
<button class="uk-button uk-button-primary uk-width-1-1" aria-busy="true">
<span class="uk-margin-small-right" uk-spinner="ratio: 0.8"></span>
Processing...
</button>
<p class="uk-text-meta uk-margin-small-top">Loading with spinner</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-text-center">
<button class="uk-button uk-button-secondary uk-width-1-1" disabled>
<span uk-icon="icon: lock" class="uk-margin-small-right"></span>
Please wait...
</button>
<p class="uk-text-meta uk-margin-small-top">Disabled state</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-text-center">
<button class="uk-button uk-button-success uk-width-1-1">
<span uk-icon="icon: check" class="uk-margin-small-right"></span>
Completed
</button>
<p class="uk-text-meta uk-margin-small-top">Success state</p>
</div>
</div>
</div>
</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>
// Button interaction examples
document.addEventListener('DOMContentLoaded', function() {
// Add to cart animation
const addToCartBtn = document.querySelector('.uk-button-primary.uk-button-large');
if (addToCartBtn) {
addToCartBtn.addEventListener('click', function() {
const originalText = this.innerHTML;
this.innerHTML = '<span uk-icon="icon: check" class="uk-margin-small-right"></span>Added!';
this.classList.remove('uk-button-primary');
this.classList.add('uk-button-success');
setTimeout(() => {
this.innerHTML = originalText;
this.classList.remove('uk-button-success');
this.classList.add('uk-button-primary');
}, 2000);
});
}
// Toggle active state in button groups
const buttonGroups = document.querySelectorAll('.uk-button-group');
buttonGroups.forEach(group => {
const buttons = group.querySelectorAll('.uk-button');
buttons.forEach(button => {
button.addEventListener('click', function() {
if (!this.classList.contains('uk-active')) {
buttons.forEach(btn => btn.classList.remove('uk-active'));
this.classList.add('uk-active');
}
});
});
});
// Simulate loading state
const loadingButtons = document.querySelectorAll('[aria-busy="true"]');
loadingButtons.forEach(button => {
setTimeout(() => {
button.innerHTML = '<span uk-icon="icon: check" class="uk-margin-small-right"></span>Done!';
button.removeAttribute('aria-busy');
button.classList.remove('uk-button-primary');
button.classList.add('uk-button-success');
}, 3000);
});
});
</script>
</body>
</html>JavaScript API
Button Interactions:
// Get button element
const button = document.getElementById('myButton');
// Add click event
button.addEventListener('click', function(event) {
event.preventDefault();
console.log('Button clicked!');
// Toggle active state
this.classList.toggle('uk-active');
// Disable button temporarily
this.disabled = true;
this.innerHTML = 'Processing...';
setTimeout(() => {
this.disabled = false;
this.innerHTML = 'Click Me';
}, 2000);
});
// Show loading state
function showLoading(button) {
const originalText = button.innerHTML;
button.innerHTML = '<span class="uk-margin-small-right" uk-spinner></span> Loading...';
button.disabled = true;
return {
hide: function() {
button.innerHTML = originalText;
button.disabled = false;
}
};
}
// Example usage
const submitButton = document.getElementById('submitBtn');
const loading = showLoading(submitButton);
// After API call completes
setTimeout(() => {
loading.hide();
submitButton.innerHTML = '<span uk-icon="icon: check"></span> Success!';
submitButton.classList.remove('uk-button-primary');
submitButton.classList.add('uk-button-success');
}, 3000);Button Group Management:
// Initialize button group
const buttonGroup = {
init: function(containerId) {
this.container = document.getElementById(containerId);
this.buttons = this.container.querySelectorAll('.uk-button');
this.activeButton = this.container.querySelector('.uk-button.uk-active');
this.bindEvents();
},
bindEvents: function() {
this.buttons.forEach(button => {
button.addEventListener('click', (event) => {
this.setActive(button);
});
});
},
setActive: function(button) {
// Remove active class from all buttons
this.buttons.forEach(btn => {
btn.classList.remove('uk-active');
btn.classList.add('uk-button-default');
btn.classList.remove('uk-button-primary');
});
// Add active class to clicked button
button.classList.add('uk-active');
button.classList.remove('uk-button-default');
button.classList.add('uk-button-primary');
this.activeButton = button;
// Dispatch custom event
const event = new CustomEvent('buttonGroupChange', {
detail: {
value: button.dataset.value || button.textContent.trim(),
button: button
}
});
this.container.dispatchEvent(event);
},
getActiveValue: function() {
return this.activeButton ?
(this.activeButton.dataset.value || this.activeButton.textContent.trim()) :
null;
}
};
// Usage
buttonGroup.init('filterButtons');
// Listen for changes
document.getElementById('filterButtons').addEventListener('buttonGroupChange', function(event) {
console.log('Selected:', event.detail.value);
// Filter content based on selection
filterContent(event.detail.value);
});
// Programmatic control
function selectFilter(filterValue) {
const button = document.querySelector(`#filterButtons .uk-button[data-value="${filterValue}"]`);
if (button) {
buttonGroup.setActive(button);
}
}Custom Button Styles
/* Custom Button Styles */
.uk-button-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
transition: all 0.3s ease;
}
.uk-button-gradient:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.uk-button-outline-primary {
background: transparent;
border: 2px solid #1e87f0;
color: #1e87f0;
font-weight: 500;
}
.uk-button-outline-primary:hover {
background: #1e87f0;
color: white;
}
.uk-button-3d {
border: none;
border-bottom: 4px solid rgba(0,0,0,0.2);
transition: all 0.1s ease;
}
.uk-button-3d:active {
transform: translateY(4px);
border-bottom: 2px solid rgba(0,0,0,0.2);
}
.uk-button-rounded {
border-radius: 50px;
}
.uk-button-icon-circle {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.uk-button-success {
background-color: #32d296;
color: white;
}
.uk-button-warning {
background-color: #faa05a;
color: white;
}
.uk-button-info {
background-color: #1e87f0;
color: white;
}
/* Button with shadow */
.uk-button-shadow {
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.uk-button-shadow:hover {
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
/* Animated button */
.uk-button-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(30, 135, 240, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(30, 135, 240, 0); }
100% { box-shadow: 0 0 0 0 rgba(30, 135, 240, 0); }
}
/* Usage in HTML */
<button class="uk-button uk-button-gradient">Gradient Button</button>
<button class="uk-button uk-button-outline-primary">Outline Button</button>
<button class="uk-button uk-button-3d uk-button-primary">3D Button</button>
<button class="uk-button uk-button-rounded uk-button-primary">Rounded Button</button>
<button class="uk-button uk-button-icon-circle uk-button-primary">
<span uk-icon="icon: plus"></span>
</button>
<button class="uk-button uk-button-success">Success Button</button>
<button class="uk-button uk-button-warning">Warning Button</button>
<button class="uk-button uk-button-primary uk-button-pulse">Live Button</button>Best Practices for Buttons:
- Use primary buttons for main actions, secondary for less important actions
- Make buttons large enough for touch devices (minimum 44x44px)
- Use clear, action-oriented text on buttons
- Provide visual feedback on hover, focus, and active states
- Disable buttons when actions are not available
- Use icons to enhance understanding, especially for common actions
- Maintain consistent button styling throughout your application
- Consider accessibility - ensure sufficient color contrast
- Use button groups for related actions
- Provide loading states for actions that take time
- Test buttons on different devices and screen sizes
