> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Notifications Panel Primitives
> Primitive components for building custom Notifications panel interfaces.
> [!TIP]
>
> Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).
## Overview
The Notifications Primitives API provides granular components that can be used independently to build fully custom notification tool and panel interfaces. All primitives share a common set of inputs documented below; list-type primitives additionally support template forwarding via slot attributes (`[listItemTemplate]`, `[itemTemplate]`, `[triggerTemplate]`).
## Common Inputs
All Notifications primitive components accept the following inputs. See [`NotificationsPrimitiveCommonProps`](https://velt.dev/docs/api-reference/sdk/models/data-models#notificationsprimitivecommonprops) for the full type definition.
| React Prop | HTML Attribute | Type | Default | Description |
| - | - | - | - | - |
| `variant` | `variant` | `string` | — | Visual variant for the component. |
| `darkMode` | `dark-mode` | `boolean` | `false` | Enables dark mode rendering. |
| `shadowDom` | `shadow-dom` | `boolean` | `false` | Renders the component inside a Shadow DOM. |
| `parentLocalUIState` | `parent-local-ui-state` | `object` | — | Local UI state passed down from a parent primitive. |
***
## Components
### VeltNotificationsToolIcon
Icon displayed in the notifications tool trigger button.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsToolUnreadIcon
Icon shown in the notifications tool trigger when there are unread notifications.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsToolLabel
Text label displayed in the notifications tool trigger button.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsToolUnreadCount
Badge showing the count of unread notifications on the tool trigger.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelTitle
Title container at the top of the notifications panel.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelTitleText
Text displayed inside the notifications panel title.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelHeader
Header bar of the notifications panel containing tabs and action buttons.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelHeaderTabForYou
Tab in the panel header that filters notifications addressed to the current user.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelHeaderTabPeople
Tab in the panel header that groups notifications by people.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelHeaderTabDocuments
Tab in the panel header that groups notifications by document.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelHeaderTabAll
Tab in the panel header that shows all notifications.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContent
Main content area of the notifications panel that renders the active tab's view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentForYou
Content view for the "For You" tab listing notifications directed at the current user.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentAll
Content view for the "All" tab showing every notification.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentAllList
Scrollable list of all notifications inside the "All" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentAllListItem` rendered inside it.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Description |
> | - | - | - |
> | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Description |
> | - | - | - |
> | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
***
### VeltNotificationsPanelContentAllListItem
A single notification row inside the "All" list. Supports `[listItemTemplate]` for custom row templates.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentAllListItemLabel
Label displayed on a notification row in the "All" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentAllListItemContent
Content body of a single notification row in the "All" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentAllReadContainer
Container that groups already-read notifications in the "All" view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentPeople
Content view for the "People" tab grouping notifications by sender.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentPeopleList
Scrollable list of people groups inside the "People" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentPeopleListItem` rendered inside it.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Description |
> | - | - | - |
> | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Description |
> | - | - | - |
> | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
***
### VeltNotificationsPanelContentPeopleListItem
A single person group row in the "People" list. Supports `[listItemTemplate]` for custom row templates.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentPeopleListItemAvatar
Avatar image for a person in the "People" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentPeopleListItemName
Display name for a person in the "People" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentPeopleListItemCount
Unread notification count badge for a person in the "People" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentPeopleListItemContent
Expanded notification content displayed under a person row in the "People" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentDocuments
Content view for the "Documents" tab grouping notifications by document.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentDocumentsList
Scrollable list of document groups inside the "Documents" content view. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentDocumentsListItem` rendered inside it.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Description |
> | - | - | - |
> | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Description |
> | - | - | - |
> | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
***
### VeltNotificationsPanelContentDocumentsListItem
A single document group row in the "Documents" list. Supports `[listItemTemplate]` for custom row templates.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentDocumentsListItemName
Document name displayed in a "Documents" list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentDocumentsListItemCount
Unread notification count badge for a document in the "Documents" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentDocumentsListItemContent
Expanded notification content displayed under a document row in the "Documents" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentDocumentsListItemUnread
Unread indicator shown on a document row in the "Documents" list.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentList
Generic scrollable notification list used across multiple tab views. Forwards `[listItemTemplate]` to each `VeltNotificationsPanelContentListItem` rendered inside it.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Description |
> | - | - | - |
> | `listItemTemplate` | `TemplateRef` | Custom template forwarded to each list item child. |
> | `listType` | `'all' \| 'for-you'` | Selects which notification feed to render from the shared context. Default: `'all'`. |
> | `documentId` | `string` | Renders notifications for the given document from `notificationsByDocumentId`. |
>
> `listType` and `documentId` are ignored when `notifications` is bound directly.
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Description |
> | - | - | - |
> | `list-item-template` | `TemplateRef` | Custom template forwarded to each list item child. |
> | `list-type` | `'all' \| 'for-you'` | Selects which notification feed to render from the shared context. Default: `"all"`. |
> | `document-id` | `string` | Renders notifications for the given document from `notificationsByDocumentId`. |
>
> `list-type` and `document-id` are ignored when `[notifications]` is bound directly.
***
### VeltNotificationsPanelContentListItem
A single row in the generic notification list. Supports `[listItemTemplate]` for custom row templates.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentListItemAvatar
User avatar displayed on a notification list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentListItemUnread
Unread dot indicator on a notification list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentListItemHeadline
Primary headline text of a notification list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentListItemBody
Body text beneath the headline on a notification list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentListItemFileName
File or document name displayed on a notification list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentListItemTime
Relative or absolute timestamp on a notification list row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelContentLoadMore
Button to load additional notifications beyond the initial set.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Description |
> | - | - | - |
> | `listType` | `'all' \| 'for-you'` | Selects which notification feed to load more from. Default: `'all'`. |
> | `documentId` | `string` | Loads more notifications for the given document from `notificationsByDocumentId`. |
>
> `listType` and `documentId` are ignored when `notifications` is bound directly.
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Description |
> | - | - | - |
> | `list-type` | `'all' \| 'for-you'` | Selects which notification feed to load more from. Default: `"all"`. |
> | `document-id` | `string` | Loads more notifications for the given document from `notificationsByDocumentId`. |
>
> `list-type` and `document-id` are ignored when `[notifications]` is bound directly.
***
### VeltNotificationsPanelCloseButton
Button that closes the notifications panel.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelReadAllButton
Button that marks all notifications as read.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelViewAllButton
Button that navigates to a full notifications view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSkeleton
Loading skeleton displayed while notification data is being fetched.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsButton
Button that opens the notifications settings panel.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettings
Container for the notifications settings view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsHeader
Header bar of the notifications settings view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsHeaderTitle
Title text displayed in the notifications settings header.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsTitle
Section title within the notifications settings view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsDescription
Descriptive text for a settings section.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsList
List container for notification settings items.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsMuteAllTitle
Title label for the mute-all notifications toggle row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsMuteAllDescription
Description text for the mute-all notifications toggle row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsMuteAllToggle
Toggle switch that mutes all notifications.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordion
Accordion container for grouped notification settings options. Forwards `[itemTemplate]` to each `VeltNotificationsPanelSettingsAccordionContentItem` and `[triggerTemplate]` to each `VeltNotificationsPanelSettingsAccordionTrigger` rendered inside it.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Description |
> | - | - | - |
> | `itemTemplate` | `TemplateRef` | Custom template forwarded to each accordion content item child. |
> | `triggerTemplate` | `TemplateRef` | Custom template forwarded to each accordion trigger child. |
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Description |
> | - | - | - |
> | `item-template` | `TemplateRef` | Custom template forwarded to each accordion content item child. |
> | `trigger-template` | `TemplateRef` | Custom template forwarded to each accordion trigger child. |
***
### VeltNotificationsPanelSettingsAccordionTrigger
Clickable trigger row that expands or collapses a settings accordion section.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionTriggerLabel
Label text displayed on a settings accordion trigger row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionTriggerIcon
Icon displayed on a settings accordion trigger row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionTriggerSelectedValue
Displays the currently selected value on a settings accordion trigger row.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionContent
Expanded content area of a settings accordion section.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionContentItem
A single selectable option inside an expanded settings accordion. Supports `[itemTemplate]` for custom option templates.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionContentItemLabel
Label text for a settings accordion content option.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsAccordionContentItemIcon
Icon for a settings accordion content option.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsBackButton
Button that navigates back from the settings view to the main notifications panel.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
***
### VeltNotificationsPanelSettingsFooter
Footer area of the notifications settings view.
> [tab] React / Next.js
>
> ```jsx theme={null}
>
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
> [tab] Other Frameworks
>
> ```html theme={null}
>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.