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

# INotificationsPanelComponentProps

- 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/NotificationsPanel/DefaultNotificationsPanel.tsx

NotificationsPanel component props.

**Signature:**

```typescript
export interface INotificationsPanelComponentProps 
```

## Properties

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [activeNotifications](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsactivenotifications) |  | [INotification](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.inotification/index.md)[] | Loaded notifications, relevant for the currently active view. |
| [activeView](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsactiveview) |  | [INotificationsPanelView](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelview/index.md) | The currently active view of the notifications panel. |
| [changeActiveView](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropschangeactiveview) |  | (view: [INotificationsPanelView](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelview/index.md)) => void | The callback to change the active view of the notifications panel. |
| [closeNotificationsPanel](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsclosenotificationspanel) |  | () => void | The callback to close the notifications panel. |
| [error?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropserror) |  | [GoodDataSdkError](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.gooddatasdkerror/index.md) | _(Optional)_ The error that occurred while loading notifications. |
| [hasNextPage](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropshasnextpage) |  | boolean | Indicates if there is a next page of notifications. |
| [hasUnreadNotifications](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropshasunreadnotifications) |  | boolean | Indicates if there are unread notifications. |
| [itemHeight](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsitemheight) |  | number | The height of the notification item in pixels. |
| [itemPadding](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsitempadding) |  | 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.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsitemsgap) |  | number | Gap between notification items in pixels. |
| [loadNextPage](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsloadnextpage) |  | () => void | The callback to load the next page of notifications. |
| [markAllNotificationsAsRead](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsmarkallnotificationsasread) |  | () => Promise<void> | The callback to mark all notifications as read. |
| [markNotificationAsRead](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsmarknotificationasread) |  | (notificationId: string) => Promise<void> | The callback to mark a notification as read. |
| [maxListHeight?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsmaxlistheight) |  | 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.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsnotification) |  | ComponentType<[INotificationComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationcomponentprops/index.md)> | Custom notification component. |
| [NotificationSkeletonItem](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsnotificationskeletonitem) |  | ComponentType<[INotificationSkeletonItemComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationskeletonitemcomponentprops/index.md)> | Custom notification skeleton item component. |
| [NotificationsList](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsnotificationslist) |  | ComponentType<[INotificationsListComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md)> | Custom notifications list component. |
| [NotificationsListEmptyState](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsnotificationslistemptystate) |  | ComponentType<[INotificationsListEmptyStateComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistemptystatecomponentprops/index.md)> | Custom notifications list empty state component. |
| [NotificationsListErrorState](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsnotificationslisterrorstate) |  | ComponentType<[INotificationsListErrorStateComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslisterrorstatecomponentprops/index.md)> | Custom notifications list error state component. |
| [NotificationsPanelHeader](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsnotificationspanelheader) |  | ComponentType<[INotificationsPanelHeaderComponentProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelheadercomponentprops/index.md)> | Custom notifications panel header component. |
| [onNotificationClick?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsonnotificationclick) |  | (notification: [INotification](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.inotification/index.md)) => void | _(Optional)_ The callback to handle a notification click. |
| [openNotificationsPanel](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsopennotificationspanel) |  | () => void | The callback to open the notifications panel. |
| [skeletonItemsCount](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsskeletonitemscount) |  | 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.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsstatus) |  | [UseCancelablePromiseStatus](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.usecancelablepromisestatus/index.md) | The status of the notifications loading. |
| [toggleNotificationsPanel](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropstogglenotificationspanel) |  | () => void | The callback to toggle the notifications panel. |
| [unreadNotificationsCount](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md#inotificationspanelcomponentpropsunreadnotificationscount) |  | number | The number of unread notifications. |

## Property details

### INotificationsPanelComponentProps.activeNotifications

Loaded notifications, relevant for the currently active view.

**Signature:**

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

### INotificationsPanelComponentProps.activeView

The currently active view of the notifications panel.

**Signature:**

```typescript
activeView: INotificationsPanelView;
```

### INotificationsPanelComponentProps.changeActiveView

The callback to change the active view of the notifications panel.

**Signature:**

```typescript
changeActiveView: (view: INotificationsPanelView) => void;
```

### INotificationsPanelComponentProps.closeNotificationsPanel

The callback to close the notifications panel.

**Signature:**

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

### INotificationsPanelComponentProps.error

The error that occurred while loading notifications.

**Signature:**

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

### INotificationsPanelComponentProps.hasNextPage

Indicates if there is a next page of notifications.

**Signature:**

```typescript
hasNextPage: boolean;
```

### INotificationsPanelComponentProps.hasUnreadNotifications

Indicates if there are unread notifications.

**Signature:**

```typescript
hasUnreadNotifications: boolean;
```

### INotificationsPanelComponentProps.itemHeight

The height of the notification item in pixels.

**Signature:**

```typescript
itemHeight: number;
```

### INotificationsPanelComponentProps.itemPadding

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

**Signature:**

```typescript
itemPadding: number;
```

### INotificationsPanelComponentProps.itemsGap

Gap between notification items in pixels.

**Signature:**

```typescript
itemsGap: number;
```

### INotificationsPanelComponentProps.loadNextPage

The callback to load the next page of notifications.

**Signature:**

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

### INotificationsPanelComponentProps.markAllNotificationsAsRead

The callback to mark all notifications as read.

**Signature:**

```typescript
markAllNotificationsAsRead: () => Promise<void>;
```

### INotificationsPanelComponentProps.markNotificationAsRead

The callback to mark a notification as read.

**Signature:**

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

### INotificationsPanelComponentProps.maxListHeight

Maximum height of the notifications list in pixels.

**Signature:**

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

### INotificationsPanelComponentProps.Notification

Custom notification component.

**Signature:**

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

### INotificationsPanelComponentProps.NotificationSkeletonItem

Custom notification skeleton item component.

**Signature:**

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

### INotificationsPanelComponentProps.NotificationsList

Custom notifications list component.

**Signature:**

```typescript
NotificationsList: ComponentType<INotificationsListComponentProps>;
```

### INotificationsPanelComponentProps.NotificationsListEmptyState

Custom notifications list empty state component.

**Signature:**

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

### INotificationsPanelComponentProps.NotificationsListErrorState

Custom notifications list error state component.

**Signature:**

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

### INotificationsPanelComponentProps.NotificationsPanelHeader

Custom notifications panel header component.

**Signature:**

```typescript
NotificationsPanelHeader: ComponentType<INotificationsPanelHeaderComponentProps>;
```

### INotificationsPanelComponentProps.onNotificationClick

The callback to handle a notification click.

**Signature:**

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

### INotificationsPanelComponentProps.openNotificationsPanel

The callback to open the notifications panel.

**Signature:**

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

### INotificationsPanelComponentProps.skeletonItemsCount

Number of skeleton items to render when loading notifications.

**Signature:**

```typescript
skeletonItemsCount: number;
```

### INotificationsPanelComponentProps.status

The status of the notifications loading.

**Signature:**

```typescript
status: UseCancelablePromiseStatus;
```

### INotificationsPanelComponentProps.toggleNotificationsPanel

The callback to toggle the notifications panel.

**Signature:**

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

### INotificationsPanelComponentProps.unreadNotificationsCount

The number of unread notifications.

**Signature:**

```typescript
unreadNotificationsCount: number;
```