Severity-ranked active alerts with source, age, acknowledgement, and open callbacks.
CriticalHighAcknowledgedResolvedEmpty
Active alerts
Resolved
Acknowledged
<AlertWidget {alerts} onacknowledge={acknowledge} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { AlertWidget } from '@chanrg/4ui';<AlertWidget {alerts} onacknowledge={acknowledge} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
alerts | AlertItem[] | [] | Caller-owned alert records. |
onacknowledge | (alert) => void | — | No API call is performed internally. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Severity uses text and distinct glyphs in addition to color.
- Actions are explicit buttons.