Webui: Alerts & Feedback

Overview

The Alerts & Feedback system in Webui handles all user-facing notifications, validation messages, and interaction confirmations. It is designed to be non-intrusive, highly configurable, and fully accessible. Components automatically adapt to your design tokens and support both light and dark modes.

Use this system to communicate system status, confirm actions, request user input, and surface important information without breaking the user's workflow.

Alert Types & Triggers

Interactive Playground Live Preview

Click the buttons below to trigger different alert states. Alerts automatically stack and dismiss after 5 seconds.

Alerts will appear here...

                        JavaScript / Webui API
                        
                    
import { useAlerts } from '@webui/feedback';

// Initialize alert system
const alerts = useAlerts();

// Trigger different states
alerts.success('Changes saved successfully.');
alerts.warning('Session expires in 5 minutes.', { duration: 5000 });
alerts.error('Failed to upload file. Please try again.', { dismissible: true });
alerts.info('New features are now available.', { position: 'top-right' });

In-App Feedback Form

User Feedback Collection Component

Embed the feedback form anywhere in your app to collect bug reports, feature requests, or general comments. Supports auto-capture of device and session data.

UX & Accessibility Guidelines

Follow these best practices to ensure your notifications are clear, respectful of user attention, and fully accessible.

✅ Do: Keep messages concise

Use clear, action-oriented language. Limit alerts to one primary message. Avoid technical jargon unless targeting developers.

✅ Do: Respect user context

Batch non-urgent notifications. Use toasts for confirmations, banners for important warnings, and modals for critical actions requiring acknowledgment.

❌ Don't: Overuse alerts

Notification fatigue reduces effectiveness. Only alert when system status changes, validation fails, or user action is required.

❌ Don't: Block workflow unnecessarily

Avoid modal alerts for informational messages. Use passive banners or toasts that don't interrupt the user's current task.

Global Configuration

Customize the behavior of the entire feedback system at the application level using the configuration object.

                        Config / webui.config.js
                        
                    
export default {
  feedback: {
    // Default duration before auto-dismiss (ms)
    duration: 5000,
    // Position: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
    position: 'bottom-right',
    // Maximum stacked alerts visible at once
    maxStack: 3,
    // Pause timers on hover
    pauseOnHover: true,
    // Accessibility: announce via screen readers
    ariaAnnounce: true
  }
}