Alert Component
Alert Component: Display important notification messages to users with different styles and close functionality.
Live Examples
1. Basic Alerts
Example Preview
A simple primary alert—check it out!
A simple success alert—check it out!
A simple warning alert—check it out!
A simple danger alert—check it out!
2. Alerts with Close Button
Example Preview
3. Alert with Links
Example Preview
This is an alert with a link. The link gets special styling.
4. Large Alerts
Example Preview
5. Alert with Icons
Example Preview
JavaScript Methods
Methods:
// Get alert instance const alert = UIkit.alert(element); // Close the alert alert.close(); // Show the alert (if hidden) alert.show();
Example Usage:
<!-- HTML -->
<div id="myAlert" class="uk-alert-primary" uk-alert>
<p>This is an alert message.</p>
</div>
<button onclick="closeAlert()">Close Alert</button>
<!-- JavaScript -->
function closeAlert() {
const alert = UIkit.alert('#myAlert');
alert.close();
}
// Close after 5 seconds automatically
setTimeout(() => {
const alert = UIkit.alert('#myAlert');
alert.close();
}, 5000);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 Alerts Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<style>
body { padding: 20px; }
.alert-demo { margin-bottom: 20px; }
</style>
</head>
<body>
<div class="uk-container">
<h1>Alert System Demo</h1>
<!-- Success Alert -->
<div id="successAlert" class="uk-alert-success alert-demo" uk-alert>
<a class="uk-alert-close" uk-close></a>
<h4 class="uk-alert-title">Welcome Back!</h4>
<p>You have successfully logged in to your account.</p>
</div>
<!-- Warning Alert -->
<div id="warningAlert" class="uk-alert-warning alert-demo" uk-alert>
<a class="uk-alert-close" uk-close></a>
<div class="uk-flex">
<div class="uk-margin-small-right">
<span uk-icon="icon: warning; ratio: 1.5"></span>
</div>
<div>
<h4 class="uk-alert-title">Account Verification Required</h4>
<p>Please verify your email address to access all features.</p>
<a href="#" class="uk-button uk-button-warning uk-button-small">Resend Verification</a>
</div>
</div>
</div>
<!-- Primary Alert -->
<div id="infoAlert" class="uk-alert-primary uk-alert-large alert-demo" uk-alert>
<h3 class="uk-alert-title">New Feature Available!</h3>
<p>We've added dark mode support. Try it out in your settings.</p>
<button class="uk-button uk-button-primary uk-button-small" onclick="enableDarkMode()">Enable Dark Mode</button>
<button class="uk-button uk-button-default uk-button-small" onclick="dismissAlert()">Dismiss</button>
</div>
<!-- Control Buttons -->
<div class="uk-margin">
<button class="uk-button uk-button-secondary" onclick="showAllAlerts()">Show All Alerts</button>
<button class="uk-button uk-button-danger" onclick="closeAllAlerts()">Close All Alerts</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 enableDarkMode() {
document.body.style.backgroundColor = '#1a1a1a';
document.body.style.color = '#ffffff';
alert('Dark mode enabled!');
}
function dismissAlert() {
const alert = UIkit.alert('#infoAlert');
alert.close();
}
function showAllAlerts() {
const alerts = document.querySelectorAll('[uk-alert]');
alerts.forEach(alertEl => {
const alert = UIkit.alert(alertEl);
// Note: UIKit alert doesn't have show() method by default
// Alerts are visible by default when not closed
alertEl.style.display = 'block';
});
}
function closeAllAlerts() {
const alerts = document.querySelectorAll('[uk-alert]');
alerts.forEach(alertEl => {
const alert = UIkit.alert(alertEl);
alert.close();
});
}
// Auto-close success alert after 10 seconds
setTimeout(() => {
const successAlert = UIkit.alert('#successAlert');
successAlert.close();
}, 10000);
</script>
</body>
</html>Alert Options
| Option | Type | Default | Description |
|---|---|---|---|
animation | Boolean | true | Enable fade animation |
duration | Number | 150 | Animation duration in ms |
selClose | String | .uk-alert-close | CSS selector for close button |
Custom Alert Styles
/* Custom Alert Styles */
.uk-alert-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.uk-alert-custom .uk-alert-title {
color: white;
font-weight: bold;
}
.uk-alert-custom .uk-alert-close {
color: white;
opacity: 0.8;
}
.uk-alert-custom .uk-alert-close:hover {
opacity: 1;
}
/* Dark Theme Alerts */
.uk-alert-dark {
background-color: #333;
color: #fff;
border-left: 4px solid #1e87f0;
}
.uk-alert-dark .uk-alert-title {
color: #fff;
}
/* Gradient Alerts */
.uk-alert-gradient-primary {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
color: white;
}
.uk-alert-gradient-success {
background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
color: white;
}Best Practices:
- Use appropriate alert types for different message priorities
- Always provide a close button for dismissible alerts
- Keep alert messages concise and actionable
- Use icons to enhance visual recognition
- Consider auto-dismissing non-critical alerts after a few seconds
- Ensure alerts are accessible with proper ARIA attributes
- Use large alerts for important announcements that need attention
Accessibility Guidelines
- Add
role="alert"for important alerts that should be announced by screen readers - Use
aria-live="polite"for less urgent alerts - Ensure close buttons have proper ARIA labels:
aria-label="Close" - Manage focus when alerts appear/disappear
- Provide keyboard navigation for alert actions
