Badge Component
Badge Component: Badges are small labels used for notifications, status indicators, and highlighting new or unread items.
Live Examples
1. Basic Badges
Example Preview
DefaultPrimarySecondarySuccessWarningDanger
SmallNormalLarge
Pill BadgeOutlinePrimary Outline
2. Badges with Icons
Example Preview
NotificationsVerifiedWarningUrgent
3. Badges on Buttons
Example Preview
4. Badges in Navigation
Example Preview
5. Badges on Cards
Example Preview
HOT
This is a featured card with a badge.
NEW
New Product
Check out our latest product with new badge.
SALE
Special Offer
Limited time sale with discount badge.
50% OFF
Product List
Total: 15
- Web DevelopmentActive
- Mobile AppPending
- UI/UX DesignOverdue
Badge Classes Reference
Color Classes
| Class | Description | Preview |
|---|---|---|
.uk-badge | Default badge (gray) | Default |
.uk-badge-primary | Primary color badge | Primary |
.uk-badge-secondary | Secondary color badge | Secondary |
.uk-badge-success | Success/green badge | Success |
.uk-badge-warning | Warning/yellow badge | Warning |
.uk-badge-danger | Danger/red badge | Danger |
Style Classes
| Class | Description | Preview |
|---|---|---|
.uk-badge-pill | Rounded pill shape | Pill |
.uk-badge-outline | Outline style | Outline |
.uk-card-badge | Position badge in card corner | Card |
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 Badges Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<style>
body { padding: 20px; }
.badge-demo-section { margin-bottom: 30px; }
.demo-container {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="uk-container">
<h1 class="uk-heading-primary">UIKit Badges Demo</h1>
<!-- User Profile with Badges -->
<div class="badge-demo-section">
<h2>User Profile Badges</h2>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" src="avatar.jpg" width="60" height="60" alt="User Avatar">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom">
John Doe
<span class="uk-badge uk-badge-success uk-margin-small-left">PRO</span>
<span class="uk-badge uk-badge-primary uk-margin-small-left">Verified</span>
</h3>
<p class="uk-text-meta uk-margin-remove-top">
<span class="uk-badge uk-badge-secondary">Web Developer</span>
<span class="uk-badge uk-badge-outline">5+ Years</span>
</p>
</div>
</div>
</div>
<div class="uk-card-body">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-3">
<div class="uk-card uk-card-primary uk-card-body">
<h4 class="uk-card-title">
Messages
<span class="uk-badge uk-badge-warning uk-float-right">12</span>
</h4>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-card uk-card-secondary uk-card-body">
<h4 class="uk-card-title">
Notifications
<span class="uk-badge uk-badge-danger uk-float-right">3</span>
</h4>
</div>
</div>
<div class="uk-width-1-3">
<div class="uk-card uk-card-default uk-card-body">
<h4 class="uk-card-title">
Tasks
<span class="uk-badge uk-badge-success uk-float-right">7/10</span>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- E-commerce Product Cards -->
<div class="badge-demo-section">
<h2>Product Cards with Badges</h2>
<div class="uk-grid-small uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-badge uk-badge uk-badge-danger">SALE</div>
<div class="uk-card-media-top">
<img src="product1.jpg" alt="Product">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Smart Watch</h3>
<p>Latest model with health tracking</p>
<div class="uk-flex uk-flex-between uk-flex-middle">
<span class="uk-text-bold">$199.99</span>
<span class="uk-badge uk-badge-success">In Stock</span>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-badge uk-badge uk-badge-warning">NEW</div>
<div class="uk-card-media-top">
<img src="product2.jpg" alt="Product">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Wireless Earbuds</h3>
<p>Noise cancellation feature</p>
<div class="uk-flex uk-flex-between uk-flex-middle">
<span class="uk-text-bold">$129.99</span>
<span class="uk-badge uk-badge-danger">Out of Stock</span>
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-badge uk-badge uk-badge-success">BEST SELLER</div>
<div class="uk-card-media-top">
<img src="product3.jpg" alt="Product">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Laptop Stand</h3>
<p>Ergonomic design</p>
<div class="uk-flex uk-flex-between uk-flex-middle">
<span class="uk-text-bold">$49.99</span>
<span class="uk-badge uk-badge-success">Limited Stock</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Notification System -->
<div class="badge-demo-section">
<h2>Notification System</h2>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">
Notifications
<span class="uk-badge uk-badge-primary">15 Total</span>
</h3>
</div>
<div class="uk-card-body">
<ul class="uk-list uk-list-divider">
<li>
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<span class="uk-badge uk-badge-primary uk-margin-small-right">INFO</span>
System update scheduled
</div>
<span class="uk-text-meta">2 hours ago</span>
</div>
</li>
<li>
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<span class="uk-badge uk-badge-success uk-margin-small-right">SUCCESS</span>
Payment received
</div>
<span class="uk-text-meta">1 day ago</span>
</div>
</li>
<li>
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<span class="uk-badge uk-badge-warning uk-margin-small-right">WARNING</span>
Low disk space
</div>
<span class="uk-text-meta">2 days ago</span>
</div>
</li>
<li>
<div class="uk-flex uk-flex-between uk-flex-middle">
<div>
<span class="uk-badge uk-badge-danger uk-margin-small-right">URGENT</span>
Security alert
</div>
<span class="uk-text-meta">3 days ago</span>
</div>
</li>
</ul>
</div>
<div class="uk-card-footer">
<button class="uk-button uk-button-primary">
<span uk-icon="icon: check"></span>
Mark all as read
</button>
<button class="uk-button uk-button-default uk-float-right">
View All
<span class="uk-badge uk-margin-small-left">15</span>
</button>
</div>
</div>
</div>
<!-- Status Indicators -->
<div class="badge-demo-section">
<h2>Status Indicators</h2>
<div class="uk-grid-small uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-body uk-text-center">
<div class="uk-badge uk-badge-success uk-badge-pill" style="width: 20px; height: 20px; margin: 0 auto 10px;"></div>
<h4>Online</h4>
<p class="uk-text-meta">Active users</p>
<span class="uk-badge uk-badge-primary">15</span>
</div>
</div>
<div>
<div class="uk-card uk-card-body uk-text-center">
<div class="uk-badge uk-badge-warning uk-badge-pill" style="width: 20px; height: 20px; margin: 0 auto 10px;"></div>
<h4>Away</h4>
<p class="uk-text-meta">Idle users</p>
<span class="uk-badge uk-badge-primary">3</span>
</div>
</div>
<div>
<div class="uk-card uk-card-body uk-text-center">
<div class="uk-badge uk-badge-danger uk-badge-pill" style="width: 20px; height: 20px; margin: 0 auto 10px;"></div>
<h4>Offline</h4>
<p class="uk-text-meta">Inactive users</p>
<span class="uk-badge uk-badge-primary">7</span>
</div>
</div>
<div>
<div class="uk-card uk-card-body uk-text-center">
<div class="uk-badge uk-badge-secondary uk-badge-pill" style="width: 20px; height: 20px; margin: 0 auto 10px;"></div>
<h4>Busy</h4>
<p class="uk-text-meta">Do not disturb</p>
<span class="uk-badge uk-badge-primary">2</span>
</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>
</body>
</html>Custom Badge Styles
/* Custom Badge Styles */
.uk-badge-custom-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
}
.uk-badge-custom-outline-primary {
background: transparent;
border: 2px solid #1e87f0;
color: #1e87f0;
font-weight: bold;
}
.uk-badge-custom-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.uk-badge-custom-large {
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 25px;
}
.uk-badge-custom-icon {
padding-left: 8px;
padding-right: 8px;
}
.uk-badge-custom-icon span[uk-icon] {
margin-right: 5px;
}
/* Animated Badge */
.uk-badge-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 */
<span class="uk-badge uk-badge-custom-gradient">Premium</span>
<span class="uk-badge uk-badge-custom-outline-primary">Outline</span>
<span class="uk-badge uk-badge-custom-large">Large Badge</span>
<span class="uk-badge uk-badge-primary uk-badge-pulse">Live</span>JavaScript Badge Updates
Dynamic Badge Updates:
// Update badge count
function updateBadgeCount(badgeId, newCount) {
const badge = document.getElementById(badgeId);
if (badge) {
badge.textContent = newCount;
// Change color based on count
if (newCount > 10) {
badge.className = 'uk-badge uk-badge-danger';
} else if (newCount > 5) {
badge.className = 'uk-badge uk-badge-warning';
} else {
badge.className = 'uk-badge uk-badge-primary';
}
}
}
// Add animation to badge
function animateBadge(badgeId) {
const badge = document.getElementById(badgeId);
if (badge) {
badge.classList.add('uk-animation-shake');
setTimeout(() => {
badge.classList.remove('uk-animation-shake');
}, 500);
}
}
// Initialize badge system
document.addEventListener('DOMContentLoaded', function() {
// Example: Update notification badge
const notificationCount = getUnreadNotifications();
updateBadgeCount('notificationBadge', notificationCount);
// Example: Animate new badge
if (hasNewItems()) {
animateBadge('newItemsBadge');
}
});Real-time Example:
<!-- HTML Structure -->
<button class="uk-button uk-button-primary" onclick="addToCart()">
<span uk-icon="icon: cart"></span>
Cart
<span id="cartBadge" class="uk-badge uk-margin-small-left">0</span>
</button>
<button class="uk-button uk-button-default" onclick="sendMessage()">
<span uk-icon="icon: mail"></span>
Messages
<span id="messageBadge" class="uk-badge uk-badge-success uk-margin-small-left">0</span>
</button>
<!-- JavaScript -->
<script>
let cartCount = 0;
let messageCount = 0;
function addToCart() {
cartCount++;
updateBadge('cartBadge', cartCount);
animateBadge('cartBadge');
}
function sendMessage() {
messageCount++;
updateBadge('messageBadge', messageCount);
}
function updateBadge(badgeId, count) {
const badge = document.getElementById(badgeId);
badge.textContent = count;
// Show/hide badge
if (count > 0) {
badge.style.display = 'inline-block';
} else {
badge.style.display = 'none';
}
}
function animateBadge(badgeId) {
const badge = document.getElementById(badgeId);
badge.classList.add('uk-animation-scale-up');
setTimeout(() => {
badge.classList.remove('uk-animation-scale-up');
}, 300);
}
</script>Best Practices for Badges:
- Use badges sparingly - only for important notifications
- Choose colors that match the importance level (red for urgent, green for positive)
- Keep badge text short (1-3 words max)
- Consider accessibility - ensure sufficient color contrast
- Use icons with badges for better visual recognition
- Implement badge animations for new notifications
- Provide a way to clear/acknowledge badges
- Test badge visibility on different background colors
- Consider mobile touch targets - make badges large enough to tap
- Use consistent badge styling throughout your application
