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

# Notifications panel

> Display and manage notifications with NotificationsPanel, configure refresh and inline or overlay rendering, and customize the panel's individual UI elements.

API reference: [NotificationsPanel()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.notificationspanel/index.md) (function)

[`NotificationsPanel`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.notificationspanel/index.md) lists the in-app notifications of the current user, such as triggered alerts, and lets them mark notifications as read. It's exported from `@gooddata/sdk-ui-ext`.

The panel:

- shows all notifications or only the unread ones,
- marks one notification or all of them as read,
- refreshes the list at an interval you set,
- loads long lists page by page with virtual scrolling,
- renders inline or in an overlay opened by your button,
- lets you replace each of its parts with your own component.

## [Basic usage](https://www.gooddata.ai/docs/gooddata-ui/latest/ai-modules/notifications-panel/#basic-usage)

In overlay mode (the default), pass a `NotificationsPanelButton` component. The panel positions itself next to the button through `buttonRef`.

```tsx
import { NotificationsPanel, type INotificationsPanelButtonComponentProps } from "@gooddata/sdk-ui-ext";
import { isAlertNotification } from "@gooddata/sdk-model";

import "@gooddata/sdk-ui-ext/styles/css/main.css";

function NotificationsPanelButton({
    buttonRef,
    toggleNotificationPanel,
}: INotificationsPanelButtonComponentProps) {
    return (
        <button
            // Provide button ref, so notification panel can be properly positioned
            ref={buttonRef}
            onClick={toggleNotificationPanel}
        >
            Notifications
        </button>
    );
}

function Header() {
    return (
        <header>
            <nav>
                <NotificationsPanel
                    onNotificationClick={(notification) => {
                        if (isAlertNotification(notification)) {
                            const dashboardURL = notification.details.data.automation.dashboardURL;
                            window.open(dashboardURL);
                        }
                    }}
                    NotificationsPanelButton={NotificationsPanelButton}
                />
            </nav>
        </header>
    );
}
```

## [Inline rendering](https://www.gooddata.ai/docs/gooddata-ui/latest/ai-modules/notifications-panel/#inline-rendering)

Set `renderInline` to render the panel in place instead of in an overlay. The panel then takes the size of its parent element, and you don't pass `NotificationsPanelButton`.

```tsx
import { NotificationsPanel } from "@gooddata/sdk-ui-ext";
import { CustomHeader, CustomNotification } from "./components";

import "@gooddata/sdk-ui-ext/styles/css/main.css";

function MyComponent() {
    return (
        <div style={{ width: 400, height: 500 }}>
            <NotificationsPanel
                NotificationsPanelHeader={CustomHeader}
                Notification={CustomNotification}
                renderInline
                refreshInterval={300000}
                onNotificationClick={(notification) => {
                    console.log("Notification clicked:", notification);
                }}
            />
        </div>
    );
}
```

## [Defaults](https://www.gooddata.ai/docs/gooddata-ui/latest/ai-modules/notifications-panel/#defaults)

| Prop | Default |
| --- | --- |
| `locale` | `"en-US"` |
| `renderInline` | `false` |
| `refreshInterval` | `600000` (10 minutes). `0` turns refreshing off. |
| `itemsPerPage` | `50` |
| `maxWidth` | `370` (overlay mode only) |
| `maxListHeight` | `527` (overlay mode only) |
| `itemHeight` | `52` |
| `itemsGap` | `10` |
| `itemPadding` | `15` |
| `skeletonItemsCount` | `5` |

`NotificationsPanelButton` is required when `renderInline` is `false`.

## [Customizable components](https://www.gooddata.ai/docs/gooddata-ui/latest/ai-modules/notifications-panel/#customizable-components)

To change how the panel looks, pass your own components instead of the default ones. Don't override the panel's CSS classes: they can change in any release.

The components are nested like this:

```text
NotificationsPanel
├── NotificationsPanelButton (when not inline)
└── NotificationsPanel
    ├── NotificationsPanelHeader
    └── NotificationsList
        ├── NotificationsListEmptyState (when empty)
        ├── NotificationsListErrorState (when error)
        ├── NotificationSkeletonItem (when loading)
        └── Notification (for each notification)
```

Each component can be replaced on its own. A custom component must handle the props it receives, so the panel keeps working.

| Prop | Default component | Props it receives | What it renders |
| --- | --- | --- | --- |
| `NotificationsPanelButton` | none | [`INotificationsPanelButtonComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelbuttoncomponentprops/index.md) | The button that opens the panel: gets `buttonRef`, functions to open, close, or toggle the panel, and whether it's open and has unread notifications. |
| [`NotificationsPanel`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.notificationspanel/index.md) | [`DefaultNotificationsPanel`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotificationspanel/index.md) | [`INotificationsPanelComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md) | The panel body. |
| `NotificationsPanelHeader` | [`DefaultNotificationsPanelHeader`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotificationspanelheader/index.md) | [`INotificationsPanelHeaderComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelheadercomponentprops/index.md) | The header with the "All" and "Unread" tabs and the "Mark all as read" button: gets the active view, a function to change it, the unread count, and `markAllNotificationsAsRead`. |
| `NotificationsList` | [`DefaultNotificationsList`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotificationslist/index.md) | [`INotificationsListComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md) | The list: gets the notifications, the loading status and error, paging functions, the item sizes, and the item components below. |
| `NotificationsListEmptyState` | [`DefaultNotificationsListEmptyState`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotificationslistemptystate/index.md) | [`INotificationsListEmptyStateComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistemptystatecomponentprops/index.md) | The message shown when the list is empty, for the active view. |
| `NotificationsListErrorState` | [`DefaultNotificationsListErrorState`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotificationslisterrorstate/index.md) | [`INotificationsListErrorStateComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslisterrorstatecomponentprops/index.md) | The message shown when loading fails: gets the `error`. |
| `Notification` | [`DefaultNotification`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotification/index.md) | [`INotificationComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationcomponentprops/index.md) | One notification: gets the `notification`, `markNotificationAsRead`, and `onNotificationClick`. |
| `NotificationSkeletonItem` | [`DefaultNotificationSkeletonItem`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.defaultnotificationskeletonitem/index.md) | [`INotificationSkeletonItemComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationskeletonitemcomponentprops/index.md) | A loading placeholder: gets its `itemHeight`. |

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/ai-modules/notifications-panel/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Backend to use. - If not defined, the backend from the BackendProvider context will be used. | — |
| [`enableScheduleNotifications`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsenableschedulenotifications) | `boolean` | No | Enable export to document storage. - Default: false | — |
| [`itemHeight`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsitemheight) | `number` | No | Height of the item in notifications list in pixels. - Default: 52 | — |
| [`itemPadding`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsitempadding) | `number` | No | Padding of the notification item (from left and right) in pixels. - Default: 15 | — |
| [`itemsGap`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsitemsgap) | `number` | No | Gap between notification items in the list in pixels. - Default: 10 | — |
| [`itemsPerPage`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsitemsperpage) | `number` | No | Number of notifications to load per page. - Default: 50 | — |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropslocale) | [`ILocale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.ilocale/index.md) | No | Locale to use. | — |
| [`maxListHeight`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsmaxlistheight) | `number` | No | Maximum height of the notifications list in pixels. - Default: 527 - Does not have effect when renderInline is true - inline rendering always fills the parent container. | — |
| [`maxWidth`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsmaxwidth) | `number \| string` | No | Optionally override max width of the notifications panel. - Does not have effect when renderInline is true - inline rendering always fills the parent container. | — |
| [`onNotificationClick`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsonnotificationclick) | `(notification:` [`INotification`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.inotification/index.md)`) => void` | No | Callback for notification click. | — |
| [`refreshInterval`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsrefreshinterval) | `number` | No | Refresh interval in milliseconds. - Default: 600000 (10 minutes) - If set to 0, notifications won't be refreshed automatically. | — |
| [`renderInline`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsrenderinline) | `boolean` | No | Enable inline rendering of the notifications panel - Default: false - If enabled, NotificationsPanelButton won't be rendered, and NotificationsPanel won't be rendered inside modal - This is useful when you want to render notifications panel in a custom modal. | — |
| [`skeletonItemsCount`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsskeletonitemscount) | `number` | No | Number of skeleton items to render when loading notifications. - Default: 5 | — |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelprops/index.md#inotificationspanelpropsworkspace) | `string` | No | Workspace ID to use. - If not defined, the workspace ID from the WorkspaceProvider context will be used. - If workspace is not defined and there is no WorkspaceProvider, notifications will be loaded from all workspaces. | — |
| [`Notification`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotification) | `ComponentType<`[`INotificationComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationcomponentprops/index.md)`>` | No | Custom notification component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationSkeletonItem`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationskeletonitem) | `ComponentType<`[`INotificationSkeletonItemComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationskeletonitemcomponentprops/index.md)`>` | No | Custom notification skeleton item component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationsList`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationslist) | `ComponentType<`[`INotificationsListComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistcomponentprops/index.md)`>` | No | Custom notifications list component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationsListEmptyState`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationslistemptystate) | `ComponentType<`[`INotificationsListEmptyStateComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslistemptystatecomponentprops/index.md)`>` | No | Custom notifications list empty state component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationsListErrorState`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationslisterrorstate) | `ComponentType<`[`INotificationsListErrorStateComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationslisterrorstatecomponentprops/index.md)`>` | No | Custom notifications list error state component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationsPanel`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationspanel) | `ComponentType<`[`INotificationsPanelComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcomponentprops/index.md)`>` | No | Custom notifications panel component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationsPanelButton`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationspanelbutton) | `ComponentType<`[`INotificationsPanelButtonComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelbuttoncomponentprops/index.md)`>` | No | Custom open notifications panel button component. - Required if renderInline is not enabled. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |
| [`NotificationsPanelHeader`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md#inotificationspanelcustomcomponentspropsnotificationspanelheader) | `ComponentType<`[`INotificationsPanelHeaderComponentProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelheadercomponentprops/index.md)`>` | No | Custom notifications panel header component. | [`INotificationsPanelCustomComponentsProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.inotificationspanelcustomcomponentsprops/index.md) |