Alert group

Static inline alert group

All alert group variants may combine multiple alert variants For example, the following static inline alert group includes one "success" alert and one "info" alert.

Toast alert group

Toast alert groups are created by passing in the isToast and isLiveRegion properties.

Click the buttons in the example below to add alerts to a toast group.

Toast alert group with overflow capture

Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set.

In the following example, an overflow message will appear when more than 4 alerts would be shown. When a 5th alert would appear, an overflow message is shown instead.

When an overflow message appears in an AlertGroup using the isLiveRegion property, the "view 1 more alert" text label will be announced, but the alert message will not.

Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later.

Asynchronous alert groups

The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the aria-live property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior.

See the alert group accessibility tab for more information on customizing this behavior.

Dynamic alert groups

Click the buttons in the example below to add dynamic alerts to a group.

Dynamic alert group with overflow message

In the following example, there can be a maximum of 4 alerts shown at once.

Multiple dynamic alert groups

You may add multiple alerts to an alert group at once. Click the "add alert collection" button in the example below to add a batch of 3 toast alerts to a group.