---
id: Alert
section: components
---

import { useEffect, useState } from 'react';
import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';

## Demos

This demonstrates how you can assemble a full page view including the use of alert group toast notifications with timeout that are also displayed inside the notification drawer.

### Alert group toast with notification drawer

```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen

```
