AlertsSection
A health alerts notification list organism with filtering and search capabilities. Displays outbreak alerts, advisories, updates, and resolved notifications.
Basic Alerts Section
Health Alerts
Stay informed about health advisories in your area
No alerts at this time.
Empty State
Health Alerts
No active alerts in your area.
Without Filters
Recent Notifications
No alerts at this time.
Usage Example
<x-interface-frameworks.alerts-section
title="Health Alerts"
description="Stay informed about health advisories"
:alerts="[
[
'title' => 'Alert Title',
'type' => 'outbreak', // outbreak, advisory, update, resolved
'description' => 'Alert description...',
'date' => 'Today',
'location' => 'Location Name',
],
]"
:showFilters="true"
emptyMessage="No alerts at this time."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Health Alerts' | Section title |
| description | string | '' | Section description |
| alerts | array | [] | Array of alert objects |
| showFilters | boolean | true | Show search and type filters |
| emptyMessage | string | 'No alerts...' | Message when no alerts |
Alert Types
outbreak
Active outbreak requiring immediate attention
advisory
Health advisory or precautionary notice
update
General information or guideline update
resolved
Previously active alert now resolved
Accessibility Features
- Semantic article elements for each alert
- Color-coded severity with text labels
- Keyboard navigable filter buttons
- Screen reader friendly search input
- Live region for filter result counts