Risk alert table
Pattern for scanning, filtering and acting on a long list of risk alerts.
Example
300 fictional alerts. Every company, event and source is made up.
Loading, empty and error do not happen on their own in this demo.
300 alerts
| Hexwell Devices | Price war in main market | Low | Negative | Earnings call | ||
|---|---|---|---|---|---|---|
| Mirebrook Health | CFO leaves | Medium | Negative | Company filing | ||
| Marrowind Utilities | Dividend suspended | High | Negative | Press release | ||
| Orrindale Textiles | Customers file class action | High | Negative | Court record | ||
| Halvenna Telecom | Sanctions exposure flagged | High | Negative | Company filing | ||
| Orrindale Textiles | Patent case lost | Medium | Negative | Court record | ||
| Lumivale Pharma | Sanctions exposure flagged | High | Negative | Company filing | ||
| Fennmoor Retail | Short-seller report published | High | Negative | Analyst note | ||
| Corvenna Travel | Debt refinanced on better terms | Low | Positive | Press release | ||
| Grestow Automotive | Debt refinanced on better terms | Low | Positive | Press release | ||
| Brenvale Foods | Main supplier stops deliveries | High | Negative | News wire | ||
| Grestow Automotive | Cyber attack stops operations | Critical | Negative | Press release | ||
| Dorvane Metals | Short-seller report published | High | Negative | News wire | ||
| Grestow Automotive | CFO leaves | Medium | Negative | Company filing | ||
| Caldrith Energy | New CEO named | Low | Neutral | Press release | ||
| Dorvane Metals | Plant shut after fire | High | Negative | News wire | ||
| Orrindale Textiles | Customers file class action | Medium | Negative | Court record | ||
| Tellamar Water | CEO resigns with immediate effect | High | Negative | Press release | ||
| Korrin Aerospace | Credit rating downgraded | High | Negative | News wire | ||
| Ostrivo Chemicals | Auditor changed | Medium | Neutral | Company filing | ||
| Orrindale Textiles | Strike at main factory | Medium | Negative | News wire | ||
| Esterly Biotech | Customers file class action | Medium | Negative | Court record | ||
| Zelvane Robotics | Cyber attack stops operations | High | Negative | News wire | ||
| Galvero Shipping | Patent case lost | Medium | Negative | Court record | ||
| Inverly Cloud | Rating outlook raised to stable | Low | Positive | News wire |
Design decisions
- A table, not a grid. People read, sort and compare alerts more than they edit cells. A native HTML table works better with screen readers and needs no special keyboard model. A grid would only make sense for heavy cell editing.
- Rows are 36px, or 32px in compact, so more alerts fit on screen for daily scanning. Filter controls are one size smaller (32px, or 28px in compact) so the filter bar stays secondary to the data. All targets stay above the 24px minimum.
- AI provenance as tokens. AI-generated cells use their own color.ai tokens and a text label, so they never look like source data. Opening the label shows why, the source, and accept, reject or undo. Because it's a token, the treatment stays the same everywhere.
- Severity is always text plus color, so it works for color-blind users and in grayscale.
Components used
- TextField: search
- Menu: severity filter, with checkbox items
- Select: date filter
- Tag: filter chips
- Checkbox: row selection
- Button: bulk actions, Clear all, Accept, Reject and Undo
- IconButton: previous and next page
- Toast: result of a bulk action
- Skeleton: loading state, with LoadingArea
- EmptyState: empty, no results and error states
- The AI label popup uses the Base UI Popover directly. There is no design system component for it yet.
Accessibility
- It is a native HTML table with a caption, column headers and a row header (the company). It is not an ARIA grid, so Tab moves through the controls inside it and screen reader table commands work.
- Each sortable column header is a button. The sorted column has aria-sort set to ascending or descending.
- After a sort or filter change, a status message reads the number of alerts and the sort order. It waits until typing pauses.
- Each row checkbox is named after the company and the event, for example "Select Hexwell Devices, Price war in main market". The number of selected rows is read as a status message.
- Removing a filter chip moves focus to the next chip, then the previous one, then the search field. Clear all moves focus to the search field.
- After a bulk action or Clear selection, focus moves to the select-all checkbox.
- The AI label is a button named after what it marks and its review status, for example "AI sentiment, not reviewed". Escape closes the popup and focus goes back to the label. After Accept or Reject, focus moves to Undo.
- Severity always shows its name. Color is never the only signal.
- On small screens the table scrolls sideways. The scroll area can take focus, so keyboard users can scroll it with the arrow keys.