Skip to main content

​
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 for the full type definition.
React PropHTML AttributeTypeDefaultDescription
variantvariantstring—Visual variant for the component.
darkModedark-modebooleanfalseEnables dark mode rendering.
shadowDomshadow-dombooleanfalseRenders the component inside a Shadow DOM.
parentLocalUIStateparent-local-ui-stateobject—Local UI state passed down from a parent primitive.

​
Components

​
VeltNotificationsToolIcon

Icon displayed in the notifications tool trigger button. 
<VeltNotificationsToolIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsToolUnreadIcon

Icon shown in the notifications tool trigger when there are unread notifications. 
<VeltNotificationsToolUnreadIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsToolLabel

Text label displayed in the notifications tool trigger button. 
<VeltNotificationsToolLabel />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsToolUnreadCount

Badge showing the count of unread notifications on the tool trigger. 
<VeltNotificationsToolUnreadCount />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelTitle

Title container at the top of the notifications panel. 
<VeltNotificationsPanelTitle />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelTitleText

Text displayed inside the notifications panel title. 
<VeltNotificationsPanelTitleText />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelHeader

Header bar of the notifications panel containing tabs and action buttons. 
<VeltNotificationsPanelHeader />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelHeaderTabForYou

Tab in the panel header that filters notifications addressed to the current user. 
<VeltNotificationsPanelHeaderTabForYou />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelHeaderTabPeople

Tab in the panel header that groups notifications by people. 
<VeltNotificationsPanelHeaderTabPeople />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelHeaderTabDocuments

Tab in the panel header that groups notifications by document. 
<VeltNotificationsPanelHeaderTabDocuments />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelHeaderTabAll

Tab in the panel header that shows all notifications. 
<VeltNotificationsPanelHeaderTabAll />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContent

Main content area of the notifications panel that renders the active tab’s view. 
<VeltNotificationsPanelContent />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentForYou

Content view for the “For You” tab listing notifications directed at the current user. 
<VeltNotificationsPanelContentForYou />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentAll

Content view for the “All” tab showing every notification. 
<VeltNotificationsPanelContentAll />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentAllList

Scrollable list of all notifications inside the “All” content view. Forwards [listItemTemplate] to each VeltNotificationsPanelContentAllListItem rendered inside it. 
<VeltNotificationsPanelContentAllList />
Props: Common inputs (see Common Inputs section) plus:
PropTypeDescription
listItemTemplateTemplateRefCustom template forwarded to each list item child.

​
VeltNotificationsPanelContentAllListItem

A single notification row inside the “All” list. Supports [listItemTemplate] for custom row templates. 
<VeltNotificationsPanelContentAllListItem />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentAllListItemLabel

Label displayed on a notification row in the “All” list. 
<VeltNotificationsPanelContentAllListItemLabel />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentAllListItemContent

Content body of a single notification row in the “All” list. 
<VeltNotificationsPanelContentAllListItemContent />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentAllReadContainer

Container that groups already-read notifications in the “All” view. 
<VeltNotificationsPanelContentAllReadContainer />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentPeople

Content view for the “People” tab grouping notifications by sender. 
<VeltNotificationsPanelContentPeople />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentPeopleList

Scrollable list of people groups inside the “People” content view. Forwards [listItemTemplate] to each VeltNotificationsPanelContentPeopleListItem rendered inside it. 
<VeltNotificationsPanelContentPeopleList />
Props: Common inputs (see Common Inputs section) plus:
PropTypeDescription
listItemTemplateTemplateRefCustom template forwarded to each list item child.

​
VeltNotificationsPanelContentPeopleListItem

A single person group row in the “People” list. Supports [listItemTemplate] for custom row templates. 
<VeltNotificationsPanelContentPeopleListItem />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentPeopleListItemAvatar

Avatar image for a person in the “People” list. 
<VeltNotificationsPanelContentPeopleListItemAvatar />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentPeopleListItemName

Display name for a person in the “People” list. 
<VeltNotificationsPanelContentPeopleListItemName />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentPeopleListItemCount

Unread notification count badge for a person in the “People” list. 
<VeltNotificationsPanelContentPeopleListItemCount />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentPeopleListItemContent

Expanded notification content displayed under a person row in the “People” list. 
<VeltNotificationsPanelContentPeopleListItemContent />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentDocuments

Content view for the “Documents” tab grouping notifications by document. 
<VeltNotificationsPanelContentDocuments />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentDocumentsList

Scrollable list of document groups inside the “Documents” content view. Forwards [listItemTemplate] to each VeltNotificationsPanelContentDocumentsListItem rendered inside it. 
<VeltNotificationsPanelContentDocumentsList />
Props: Common inputs (see Common Inputs section) plus:
PropTypeDescription
listItemTemplateTemplateRefCustom template forwarded to each list item child.

​
VeltNotificationsPanelContentDocumentsListItem

A single document group row in the “Documents” list. Supports [listItemTemplate] for custom row templates. 
<VeltNotificationsPanelContentDocumentsListItem />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentDocumentsListItemName

Document name displayed in a “Documents” list row. 
<VeltNotificationsPanelContentDocumentsListItemName />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentDocumentsListItemCount

Unread notification count badge for a document in the “Documents” list. 
<VeltNotificationsPanelContentDocumentsListItemCount />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentDocumentsListItemContent

Expanded notification content displayed under a document row in the “Documents” list. 
<VeltNotificationsPanelContentDocumentsListItemContent />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentDocumentsListItemUnread

Unread indicator shown on a document row in the “Documents” list. 
<VeltNotificationsPanelContentDocumentsListItemUnread />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentList

Generic scrollable notification list used across multiple tab views. Forwards [listItemTemplate] to each VeltNotificationsPanelContentListItem rendered inside it. 
<VeltNotificationsPanelContentList />
Props: Common inputs (see Common Inputs section) plus:
PropTypeDescription
listItemTemplateTemplateRefCustom template forwarded to each list item child.

​
VeltNotificationsPanelContentListItem

A single row in the generic notification list. Supports [listItemTemplate] for custom row templates. 
<VeltNotificationsPanelContentListItem />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentListItemAvatar

User avatar displayed on a notification list row. 
<VeltNotificationsPanelContentListItemAvatar />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentListItemUnread

Unread dot indicator on a notification list row. 
<VeltNotificationsPanelContentListItemUnread />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentListItemHeadline

Primary headline text of a notification list row. 
<VeltNotificationsPanelContentListItemHeadline />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentListItemBody

Body text beneath the headline on a notification list row. 
<VeltNotificationsPanelContentListItemBody />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentListItemFileName

File or document name displayed on a notification list row. 
<VeltNotificationsPanelContentListItemFileName />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentListItemTime

Relative or absolute timestamp on a notification list row. 
<VeltNotificationsPanelContentListItemTime />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelContentLoadMore

Button to load additional notifications beyond the initial set. 
<VeltNotificationsPanelContentLoadMore />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelCloseButton

Button that closes the notifications panel. 
<VeltNotificationsPanelCloseButton />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelReadAllButton

Button that marks all notifications as read. 
<VeltNotificationsPanelReadAllButton />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelViewAllButton

Button that navigates to a full notifications view. 
<VeltNotificationsPanelViewAllButton />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSkeleton

Loading skeleton displayed while notification data is being fetched. 
<VeltNotificationsPanelSkeleton />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsButton

Button that opens the notifications settings panel. 
<VeltNotificationsPanelSettingsButton />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettings

Container for the notifications settings view. 
<VeltNotificationsPanelSettings />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsHeader

Header bar of the notifications settings view. 
<VeltNotificationsPanelSettingsHeader />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsHeaderTitle

Title text displayed in the notifications settings header. 
<VeltNotificationsPanelSettingsHeaderTitle />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsTitle

Section title within the notifications settings view. 
<VeltNotificationsPanelSettingsTitle />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsDescription

Descriptive text for a settings section. 
<VeltNotificationsPanelSettingsDescription />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsList

List container for notification settings items. 
<VeltNotificationsPanelSettingsList />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsMuteAllTitle

Title label for the mute-all notifications toggle row. 
<VeltNotificationsPanelSettingsMuteAllTitle />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsMuteAllDescription

Description text for the mute-all notifications toggle row. 
<VeltNotificationsPanelSettingsMuteAllDescription />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsMuteAllToggle

Toggle switch that mutes all notifications. 
<VeltNotificationsPanelSettingsMuteAllToggle />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordion

Accordion container for grouped notification settings options. Forwards [itemTemplate] to each VeltNotificationsPanelSettingsAccordionContentItem and [triggerTemplate] to each VeltNotificationsPanelSettingsAccordionTrigger rendered inside it. 
<VeltNotificationsPanelSettingsAccordion />
Props: Common inputs (see Common Inputs section) plus:
PropTypeDescription
itemTemplateTemplateRefCustom template forwarded to each accordion content item child.
triggerTemplateTemplateRefCustom template forwarded to each accordion trigger child.

​
VeltNotificationsPanelSettingsAccordionTrigger

Clickable trigger row that expands or collapses a settings accordion section. 
<VeltNotificationsPanelSettingsAccordionTrigger />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionTriggerLabel

Label text displayed on a settings accordion trigger row. 
<VeltNotificationsPanelSettingsAccordionTriggerLabel />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionTriggerIcon

Icon displayed on a settings accordion trigger row. 
<VeltNotificationsPanelSettingsAccordionTriggerIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionTriggerSelectedValue

Displays the currently selected value on a settings accordion trigger row. 
<VeltNotificationsPanelSettingsAccordionTriggerSelectedValue />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionContent

Expanded content area of a settings accordion section. 
<VeltNotificationsPanelSettingsAccordionContent />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionContentItem

A single selectable option inside an expanded settings accordion. Supports [itemTemplate] for custom option templates. 
<VeltNotificationsPanelSettingsAccordionContentItem />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionContentItemLabel

Label text for a settings accordion content option. 
<VeltNotificationsPanelSettingsAccordionContentItemLabel />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsAccordionContentItemIcon

Icon for a settings accordion content option. 
<VeltNotificationsPanelSettingsAccordionContentItemIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsBackButton

Button that navigates back from the settings view to the main notifications panel. 
<VeltNotificationsPanelSettingsBackButton />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsPanelSettingsFooter

Footer area of the notifications settings view. 
<VeltNotificationsPanelSettingsFooter />
Props: Common inputs only (see Common Inputs section).