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