Alert System
Multi-channel alert management system with priority-based routing, digest modes, and acknowledgment tracking. Ensures critical issues reach the right people through the right channels.
Preview
Priority-based alerts with multi-channel notifications
Alert Center
3 active alerts
Primary database is not responding. Multiple services affected.
Server memory usage exceeded 85% threshold.
Cache efficiency has dropped by 5% over the last hour.
Priority Channels
Each priority level has configured notification channels
Empty State
Clean display when no alerts are active
Alert Center
0 active alerts
All Clear
No active alerts at the moment
Props
AlertSystem component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
alerts | Alert[] | [] | Array of alerts to display in the system |
onAcknowledge | (alertId: string) => void | — | Callback when an alert is acknowledged |
onDismiss | (alertId: string) => void | — | Callback when an alert is dismissed |
onConfigure | () => void | — | Callback when the configure button is clicked |
className | string | — | Additional CSS classes |
Alert Type
interface Alert { id: string priority: 'critical' | 'high' | 'medium' | 'low' title: string message: string timestamp: string // ISO date string acknowledged: boolean}Usage
Import and implementation example
import { AlertSystem, type Alert } from '@/blocks/monitoring/alert-system'
const alerts: Alert[] = [ { id: '1', priority: 'critical', title: 'Database Connection Timeout', message: 'Primary database is not responding.', timestamp: new Date().toISOString(), acknowledged: false, }, { id: '2', priority: 'high', title: 'High Memory Usage', message: 'Server memory usage exceeded 85% threshold.', timestamp: new Date().toISOString(), acknowledged: false, },]
export default function Example() { const handleAcknowledge = (alertId: string) => { console.log('Acknowledged:', alertId) }
const handleDismiss = (alertId: string) => { console.log('Dismissed:', alertId) }
return ( <AlertSystem alerts={alerts} onAcknowledge={handleAcknowledge} onDismiss={handleDismiss} onConfigure={() => console.log('Opening configuration')} /> )}Built With
3 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Priority-based routing: Critical alerts via SMS/Phone, high via Slack, medium via Email
- Multi-channel support: SMS, Phone, Slack, Email, Push notifications, and digest modes
- Acknowledgment tracking: Track which alerts have been acknowledged and by whom
- Priority summary: At-a-glance view of alert counts by severity level
- Tabbed interface: Separate views for active and acknowledged alerts
- Channel indicators: Visual icons showing which channels are notified for each priority
- Empty state: Clean success indicator when no alerts are present
- Dark mode: Full dark mode support with proper color contrast
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
role="region" on containeraria-label for alert priority sectionsaria-live="polite" for dynamic content updatesKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between interactive elements |
| Enter / Space | Activate buttons (Acknowledge, Dismiss, Configure) |
Notes
- Priority badges use semantic color coding for severity indication
- Tab navigation provides clear switching between active and acknowledged alerts
- Configure button is clearly labeled for screen readers
- Alert messages include timestamps for context