---
id: Notification drawer
section: components
cssPrefix: pf-c-notification-drawer
propComponents:
  [
    'NotificationDrawer',
    'NotificationDrawerBody',
    'NotificationDrawerHeader',
    'NotificationDrawerGroup',
    'NotificationDrawerGroupList',
    'NotificationDrawerList',
    'NotificationDrawerListItem',
    'NotificationDrawerListItemBody',
    'NotificationDrawerListItemHeader',
  ]
---

import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

## Examples

### Basic

```ts file="NotificationDrawerBasic.tsx"
```

### Groups

```ts file="NotificationDrawerGroups.tsx"
```

### Lightweight

```ts file="NotificationDrawerLightweight.tsx"
```