Alert System

Monitoring
Block

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

critical1
high1
medium0
low1
critical
Database Connection Timeout

Primary database is not responding. Multiple services affected.

3/21/2026, 8:47:59 PM
high
High Memory Usage

Server memory usage exceeded 85% threshold.

3/21/2026, 8:37:59 PM
low
Cache Hit Rate Decreased

Cache efficiency has dropped by 5% over the last hour.

3/21/2026, 7:47:59 PM

Priority Channels

Each priority level has configured notification channels

Critical
SMS, Phone, Slack
High
Slack, Email, Push
Medium
Email, Push
Low
Digest

Empty State

Clean display when no alerts are active

Alert Center

0 active alerts

critical0
high0
medium0
low0

All Clear

No active alerts at the moment

Props

AlertSystem component API reference

PropTypeDefaultDescription
alertsAlert[][]Array of alerts to display in the system
onAcknowledge(alertId: string) => voidCallback when an alert is acknowledged
onDismiss(alertId: string) => voidCallback when an alert is dismissed
onConfigure() => voidCallback when the configure button is clicked
classNamestringAdditional 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 components

This 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 updates

Keyboard Navigation

KeyAction
TabNavigate between interactive elements
Enter / SpaceActivate 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