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

import { useEffect, useState } from 'react';
import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-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

```ts file="examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx" isFullscreen

```