The alerts banner provides the user with instant updates of incoming alerts through a collapsible element located at the top of the screen.
The component can be toggled using the switch icon next to the number of alerts. The severity of each alert is shown using the corresponding color as defined in the alert rules – red, orange, yellow and green colors are shown for critical, high, medium and low severity alerts respectively.
The alert component
The alert component has the following functionality:
- the pin icon toggles between the alert banner being fixed at the top of the screen or scroll along with the page content. Keep in mind that the pin icon is disabled for some pages and it is missing on most mobile devices.
- The two chevron icons navigate to the previous or next alert. The last 100 alerts are shown within the banner. The chevron icons are not visible on some mobile devices because of the component’s touch capabilities – the user can swipe between alerts.
- Clicking on an alert navigates to the alert details page