> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# INotificationsListComponentProps

- Package: [@gooddata/sdk-ui-ext](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/index.md)
- Kind: interface
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-ext/src/notificationsPanel/NotificationsList/DefaultNotificationsList.tsx

Props for the NotificationsList component.

**Signature:**

```typescript
export interface INotificationsListComponentProps 
```

## Properties

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [activeNotifications?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsactivenotifications) |  | [INotification](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.inotification/index.md)[] | _(Optional)_ Loaded notifications relevant to the active view. |
| [activeView](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsactiveview) |  | [INotificationsPanelView](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelview/index.md) | Active view of the notifications list. |
| [closeNotificationsPanel](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsclosenotificationspanel) |  | () => void | Callback function to close the notifications panel. |
| [error?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropserror) |  | [GoodDataSdkError](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.gooddatasdkerror/index.md) | _(Optional)_ Error to display. |
| [hasNextPage](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropshasnextpage) |  | boolean | Whether there is a next page of notifications. |
| [itemHeight](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsitemheight) |  | number | Height of the notification item in pixels. |
| [itemPadding](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsitempadding) |  | number | Padding of the notification item (from left/right) in pixels. |
| [itemsGap](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsitemsgap) |  | number | Gap between notification items in pixels. |
| [loadNextPage](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsloadnextpage) |  | () => void | Load next page of notifications. |
| [markNotificationAsRead](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsmarknotificationasread) |  | (notificationId: string) => Promise<void> | Callback function to mark notification as read. |
| [maxListHeight?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsmaxlistheight) |  | number | _(Optional)_ Maximum height of the notifications list in pixels. |
| [Notification](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsnotification) |  | ComponentType<[INotificationComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationcomponentprops/index.md)> | Component to render each notification. |
| [NotificationSkeletonItem](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsnotificationskeletonitem) |  | ComponentType<[INotificationSkeletonItemComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationskeletonitemcomponentprops/index.md)> | Component to render each skeleton item. |
| [NotificationsListEmptyState](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsnotificationslistemptystate) |  | ComponentType<[INotificationsListEmptyStateComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistemptystatecomponentprops/index.md)> | Component to render when the notifications list is empty. |
| [NotificationsListErrorState](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsnotificationslisterrorstate) |  | ComponentType<[INotificationsListErrorStateComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslisterrorstatecomponentprops/index.md)> | Component to render when the notifications list is in error state. |
| [onNotificationClick?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsonnotificationclick) |  | (notification: [INotification](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.inotification/index.md)) => void | _(Optional)_ Callback function to handle notification click. |
| [skeletonItemsCount](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsskeletonitemscount) |  | number | Number of skeleton items to render when loading notifications. |
| [status](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md#inotificationslistcomponentpropsstatus) |  | [UseCancelablePromiseStatus](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.usecancelablepromisestatus/index.md) | Status of the notifications list. |

## Property details

### INotificationsListComponentProps.activeNotifications

Loaded notifications relevant to the active view.

**Signature:**

```typescript
activeNotifications?: INotification[];
```

### INotificationsListComponentProps.activeView

Active view of the notifications list.

**Signature:**

```typescript
activeView: INotificationsPanelView;
```

### INotificationsListComponentProps.closeNotificationsPanel

Callback function to close the notifications panel.

**Signature:**

```typescript
closeNotificationsPanel: () => void;
```

### INotificationsListComponentProps.error

Error to display.

**Signature:**

```typescript
error?: GoodDataSdkError;
```

### INotificationsListComponentProps.hasNextPage

Whether there is a next page of notifications.

**Signature:**

```typescript
hasNextPage: boolean;
```

### INotificationsListComponentProps.itemHeight

Height of the notification item in pixels.

**Signature:**

```typescript
itemHeight: number;
```

### INotificationsListComponentProps.itemPadding

Padding of the notification item (from left/right) in pixels.

**Signature:**

```typescript
itemPadding: number;
```

### INotificationsListComponentProps.itemsGap

Gap between notification items in pixels.

**Signature:**

```typescript
itemsGap: number;
```

### INotificationsListComponentProps.loadNextPage

Load next page of notifications.

**Signature:**

```typescript
loadNextPage: () => void;
```

### INotificationsListComponentProps.markNotificationAsRead

Callback function to mark notification as read.

**Signature:**

```typescript
markNotificationAsRead: (notificationId: string) => Promise<void>;
```

### INotificationsListComponentProps.maxListHeight

Maximum height of the notifications list in pixels.

**Signature:**

```typescript
maxListHeight?: number;
```

### INotificationsListComponentProps.Notification

Component to render each notification.

**Signature:**

```typescript
Notification: ComponentType<INotificationComponentProps>;
```

### INotificationsListComponentProps.NotificationSkeletonItem

Component to render each skeleton item.

**Signature:**

```typescript
NotificationSkeletonItem: ComponentType<INotificationSkeletonItemComponentProps>;
```

### INotificationsListComponentProps.NotificationsListEmptyState

Component to render when the notifications list is empty.

**Signature:**

```typescript
NotificationsListEmptyState: ComponentType<INotificationsListEmptyStateComponentProps>;
```

### INotificationsListComponentProps.NotificationsListErrorState

Component to render when the notifications list is in error state.

**Signature:**

```typescript
NotificationsListErrorState: ComponentType<INotificationsListErrorStateComponentProps>;
```

### INotificationsListComponentProps.onNotificationClick

Callback function to handle notification click.

**Signature:**

```typescript
onNotificationClick?: (notification: INotification) => void;
```

### INotificationsListComponentProps.skeletonItemsCount

Number of skeleton items to render when loading notifications.

**Signature:**

```typescript
skeletonItemsCount: number;
```

### INotificationsListComponentProps.status

Status of the notifications list.

**Signature:**

```typescript
status: UseCancelablePromiseStatus;
```