Notification Component

Axiom01's notification component provides a non-intrusive way to display short, timely messages to users. These can be used for confirmations, warnings, or general information, appearing temporarily and often dismissible.

Live Example

HTML Structure

Notifications are typically generated dynamically via JavaScript, but their base structure is simple:

<div class="notification-container">
<div class="notification success" role="status" aria-live="polite">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
    <div>Your changes have been saved!</div>
    <button class="close-notification" aria-label="Close notification">&times;</button>
</div>
</div>

Styling

The .notification-container positions the notifications (e.g., top-right of the viewport). Individual notifications use the .notification class, with modifier classes like .success, .warning, .error, or .info to indicate their type.

Notifications are designed to be animated for a smooth appearance and disappearance.

JavaScript Integration

Notifications are primarily driven by JavaScript. You'll need to:

Create a function to generate and append notification elements to the .notification-container.
Implement logic for auto-dismissal after a set duration.
Handle user-initiated dismissal via the close button.
Ensure proper ARIA attributes are set for accessibility.

<script>
function showNotification(type) {
    const container = document.getElementById('notification-container');
    const notification = document.createElement('div');
    notification.classList.add('notification', type);
    notification.setAttribute('role', 'status');
    notification.setAttribute('aria-live', 'polite');

    let message = '';
    let icon = '';
    if (type === 'success') {
        message = 'Operation successful!';
        icon = '<i class="fas fa-check-circle" aria-hidden="true"></i>';
    } else if (type === 'warning') {
        message = 'Warning: Something needs your attention.';
        icon = '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>';
    } else if (type === 'error') {
        message = 'Error: Please try again.';
        icon = '<i class="fas fa-times-circle" aria-hidden="true"></i>';
    }

    notification.innerHTML = `
        ${icon}
        <div>${message}</div>
        <button class="close-notification" aria-label="Close notification">&times;</button>
    `;

    container.appendChild(notification);

    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        notification.remove();
    }, 5000);

    // Dismiss on close button click
    notification.querySelector('.close-notification').addEventListener('click', () => {
        notification.remove();
    });
}
</script>

Accessibility

role="status" and aria-live="polite" on the notification container ensure screen readers announce new notifications without interrupting the user.
Close buttons have descriptive aria-label attributes.
Icons are marked with aria-hidden="true" if purely decorative.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. The positioning of the .notification-container can be adjusted with standard CSS positioning properties.