@patternfly/react-core/src/components/AlertGroup/examples/AlertGroup.md

This library provides a set of common React components for use with the PatternFly reference implementation.

---
id: Alert group
section: components
cssPrefix: pf-c-alert-group
propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLink']
---

## Examples
### Static alert group
These alerts appear on page load and are discoverable from within the normal page content flow, and will not be announced individually/explicitly to assistive technology.
```ts file="./AlertGroupStatic.tsx"
```

### Toast alert group
Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.
```ts file="./AlertGroupToast.tsx"
```

### Toast alert group with overflow capture
After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with `isLiveRegion`, the `View 1 more alert` text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.
```ts file="AlertGroupToastOverflowCapture.tsx" isBeta
```

### Singular dynamic alert group
This alert will appear in the page, most likely in response to a user action.
```ts file="./AlertGroupSingularDynamic.tsx"
```

### Singular dynamic alert group with overflow message
This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.
```ts file="AlertGroupSingularDynamicOverflow.tsx" isBeta
```

### Multiple dynamic alert group
These alerts will appear in the page, most likely in response to a user action.
```ts file="./AlertGroupMultipleDynamic.tsx"
```

### Async alert group
This shows how an alert could be triggered by an asynchronous event in the application. Note how you can customize how the alert will be announced to assistive technology. See the alert group accessibility tab for more information.
```ts file="./AlertGroupAsync.tsx"
```