AlertRow
A record of an alert that happened, such as a crash or a failed health check, with where and when. Pick it for an alert history; Enter jumps to the source.
- AlertRow
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AlertRow
Error: worker crashed with exit code 137shop · 2 min agoOut of memory
Warning: db failed its health check three timesshop · 12 min agoUnhealthy
Error: api restarted 5 times in 2 minutesbilling · 1 h agoRestart loop
Success: db is healthy againshop · 3 h agoRecovered
Dark theme, AlertRow
Error: worker crashed with exit code 137shop · 2 min agoOut of memory
Warning: db failed its health check three timesshop · 12 min agoUnhealthy
Error: api restarted 5 times in 2 minutesbilling · 1 h agoRestart loop
Success: db is healthy againshop · 3 h agoRecovered
High contrast theme, AlertRow
Error: worker crashed with exit code 137shop · 2 min agoOut of memory
Warning: db failed its health check three timesshop · 12 min agoUnhealthy
Error: api restarted 5 times in 2 minutesbilling · 1 h agoRestart loop
Success: db is healthy againshop · 3 h agoRecovered
UsageLink to the section Usage
import { AlertRow } from '@skribly/ui/ops'<List aria-label={t('alerts.recent')} items={alerts} emptyState={t('alerts.none')}>
{(a) => <AlertRow id={a.id} tone={a.kind === 'unhealthy' ? 'warn' : 'danger'} toneLabel={t(`tone.${tone}`)}
title={a.message} meta={`${a.project} · ${ago(a.at)}`} kindLabel={t(`alerts.${a.kind}`)}
onAction={() => focus(a.containerId)} />}
</List>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Each tone has its own icon shape and is read as a word before the title.
- The row is history, not a live alert: announce a new alert with a toast, assertive when it blocks work.
- Enter runs onAction; meta and badges wrap at large zoom.
This demo runs through axe in all three themes on every test run. See what the tests check.