Note: This page is to provide examples from different Design Systems for testing. The accessibility of the resources linked below may change over time. The controls may be amazing or not. This is not advocating for the quality of the accessible experience.
An alert is an “assertive live region” that is not required to receive focus. Since they are not required to recieve focus, content authors should not require users to close an alert. User agents will often fire a system alert event for elements with role=”alert”. If the alert requires focus to close it, then the author should use the related role=”alertdialog”.
- Barista – Alert (dynatrace.com)
- Base Web – Notification
- Message (biings.design)
- Blocks by CBRE Build
- Pattern Lab – viewall-components-banner (boltdesignsystem.com)
- Alerts & Messaging (hubspot.com)
- Notification – Carbon Design System
- Alert | Cedar Design System | REI Co-op
- Alert | Clarity Design System
- Comet Block Messages (discoveryeducation.com)
- Notifications – The Beeline Design System
- Elements & Components | Mutual of Omaha Design Guide
- Alert | Duet Design System (duetds.com)
- Storybook (etrade.design) – Toast Alert
- Elastic UI Framework – Toast
- (More coming soon)