Notifications Panel Wireframe Variables

Template variables exposed by the Notifications Panel wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Notifications Panel wireframe exposes the variables below. Use them inside any <velt-notifications-panel-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	<velt-data field="var" />	<velt-data field="notification.title" />
Hide / show conditionally	velt-if="{var}"	velt-if="{settingsOpen}"
Toggle a CSS class	velt-class="'cls': {var}"	velt-class="'tab-{selectedTab}': true"

All variables are mapped — reference them by their short name. You do not need the componentConfig. prefix.

Data State

Per-feature data: the four notification groupings, the active settings tree, and the current document name.

Variable	Type	Description	Example
notificationsForYouInSession	Notification[] | null	Notifications matched to the current user.	<velt-data field="notificationsForYouInSession.length" />
notificationsInSession	Notification[] | null	All in-session notifications (combined feed).	<velt-data field="notificationsInSession.length" />
notificationsByUserMap	Record<string, { user: User; notifications: Notification[] }>	Notifications grouped by user email.	<velt-data field="notificationsByUserMap[notification.from.email].notifications.length" />
notificationsByDocumentId	{ documentId: string; notifications: Notification[] }[] | null	Notifications grouped by document.	<velt-data field="notificationsByDocumentId.0.documentId" />
notificationsByDate	{ date: string; displayName: string; notifications: Notification[] }[] | null	Notifications grouped by date bucket.	<velt-data field="notificationsByDate.0.displayName" />
currentDocumentName	string	Display name of the current document.	<velt-data field="currentDocumentName" />
unreadNotificationsForYou	number	Unread-count badge for the For-you tab (also exposed by the notifications-tool).	<velt-data field="unreadNotificationsForYou" />
settingsConfig	NotificationInitialSettingsConfig[]	Settings-tree configuration for the in-panel settings view.	<velt-data field="settingsConfig.length" />
settingsSelectedOption	Record<string, NotificationConfigValue>	Selected option per accordion.	<velt-data field="settingsSelectedOption.inbox" />

UI State

Per-instance UI flags driven by the panel itself.

Variable	Type	Description	Example
selectedTab	'forYou' | 'people' | 'documents' | 'all'	Active tab id.	velt-class="'tab-{selectedTab}': true"
tabConfig	NotificationTabConfig | null	Per-tab visibility config (forYou, people, documents, all).	velt-if="{tabConfig.forYou}"
TABS	{ ForYou: 'forYou'; People: 'people'; Documents: 'documents'; All: 'all' }	Constant tab-id map. Useful when comparing to selectedTab.	velt-class="'is-foryou': '{selectedTab} === {TABS.ForYou}'"
tabPage	{ forYou: number; people: number; documents: number; all: number }	Pagination cursor per tab.	<velt-data field="tabPage.forYou" />
pageSize	number	Page size (default 5).	<velt-data field="pageSize" />
panelOpenMode	'popover' | 'sidebar' | …	Layout mode for the panel.	velt-class="'mode-{panelOpenMode}': true"
settingsOpen	boolean	Settings view is open.	velt-class="'settings-open': {settingsOpen}"
settingsAccordionExpanded	Record<string, boolean>	Per-accordion expanded state, keyed by setting id.	velt-class="'inbox-open': {settingsAccordionExpanded.inbox}"
settingsMutedAll	boolean	Master “mute all” toggle state.	velt-class="'muted-all': {settingsMutedAll}"
settingsItemRecentlyClosed	boolean	Triggers the close animation.	velt-class="'recently-closed': {settingsItemRecentlyClosed}"
settingsLayout	'accordion' | …	Settings UI layout.	velt-class="'layout-{settingsLayout}': true"
tabCount	number	Number of visible tabs.	<velt-data field="tabCount" />
usersExpanded	Record<string, boolean>	Per-user accordion expanded state, keyed by email.	velt-class="'expanded': {usersExpanded[notification.from.email]}"
documentExpanded	Record<string, boolean>	Per-document accordion expanded state, keyed by document id.	velt-class="'expanded': {documentExpanded[notification.documentId]}"
shadowDom	boolean	Shadow-DOM wrapping flag.	Host config — set via element attribute.
notificationsPanelVisible	boolean	Panel itself is currently visible (also exposed by the notifications-tool).	velt-class="'panel-visible': {notificationsPanelVisible}"
darkMode	boolean	Dark mode is active.	velt-class="'theme-dark': {darkMode}"
variant	string	Per-instance variant tag set on the host element.	<velt-data field="variant" />

Feature State

Capability flags toggled via SDK config.

Variable	Type	Description	Example
settingsEnabled	boolean	Settings view is available.	velt-if="{settingsEnabled}"

Common Props

Every Notifications Panel primitive accepts:

React Prop	HTML Attribute	Type	Default	Description
defaultCondition	default-condition	boolean | "true" | "false"	true	When false, the component always renders regardless of internal state.

Signal inputs (for parent-child component composition):

• [componentConfigSignal] — shared per-feature config signal (notification groupings, tab config, settings).
• [parentLocalUIState] — per-instance UI state signal (darkMode, variant).

Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the Available in column. Each is injected by the iteration primitive that owns the tag.

Variable	Type	Available in	Example
notification	Notification	<velt-notifications-panel-content-list-wireframe> and descendants	<velt-data field="notification.title" />
notifications	Notification[]	*-content-list, *-content-load-more	<velt-data field="notifications.length" />
isLoadMoreVisible	boolean	*-content-load-more	velt-if="{isLoadMoreVisible}"
isAllRead	boolean	*-content-all-read-container	velt-if="{isAllRead}"

Type Reference

Types referenced by the variables above are documented in Data Models:

Type	Description
Notification	A single notification (id, type, title, message, icon, from, to, documentId, documentName, createdAt, read, link, metadata).
User	Identified end-user object (used by notification.from, notification.to).
NotificationInitialSettingsConfig	One row of the settings tree (id, name, type, options).
NotificationConfigValue	A selectable value inside a settings dropdown.
NotificationTabConfig	Per-tab visibility flags (forYou, people, documents, all).

Subcomponents

Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the shouldShow condition, and host CSS classes.

notifications-panel (root)

The root primitive — the <velt-notifications-panel> element customers place in their app.

• Public element: <velt-notifications-panel>
• Wireframe tag: <velt-notifications-panel-wireframe>

Property	Value
Extra variables	None — root only sees common variables.
Host class	v-notifications-panel-container velt-notifications-panel
Conditional classes	bottom-sheet (when bottomSheetMode), velt-notifications-panel--sidebar-panel (when panelOpenMode === 'sidebar')

---

notifications-panel-title

The panel title bar (heading + actions toolbar).

• Public element: <velt-notifications-panel-title>
• Wireframe tag: <velt-notifications-panel-title-wireframe>
• Children: *-title-text, *-close-button, *-settings-button, *-read-all-button, *-view-all-button.

Property	Value
Extra variables	None beyond common variables.
Host classes	velt-notification-panel--title (heading), velt-notification-panel--actions (actions toolbar)

---

notifications-panel-title-text

The text inside the title heading. Defaults to “Notifications”.

• Public element: <velt-notifications-panel-title-text>
• Wireframe tag: <velt-notifications-panel-title-text-wireframe>

Property	Value
Extra variables	None.

---

notifications-panel-close-button

Close button — clicking calls componentConfig.closeNotificationsPanel().

• Public element: <velt-notifications-panel-close-button>
• Wireframe tag: <velt-notifications-panel-close-button-wireframe>

Property	Value
Extra variables	None.
Host class	velt-notification-panel--close-button

---

notifications-panel-settings-button

Gear-icon button that opens the settings view.

• Public element: <velt-notifications-panel-settings-button>
• Wireframe tag: <velt-notifications-panel-settings-button-wireframe>

Property	Value
Extra variables	None.
shouldShow	Parent gates rendering on settingsEnabled === true.
Host classes	velt-notifications-panel--settings-button-container (outer wrapper), velt-notifications-panel--settings-button (inner button)

---

notifications-panel-read-all-button

“Mark all as read” button.

• Public element: <velt-notifications-panel-read-all-button>
• Wireframe tag: <velt-notifications-panel-read-all-button-wireframe>

Property	Value
Extra variables	None.
Host class	v-read-all-btn velt-notifications-panel--read-all-button

---

notifications-panel-view-all-button

“View all” link that takes the user to the full notifications history.

• Public element: <velt-notifications-panel-view-all-button>
• Wireframe tag: <velt-notifications-panel-view-all-button-wireframe>

Property	Value
Extra variables	None.
Host class	all-notifications-view-all-btn velt-notifications-panel--view-all-button

---

notifications-panel-skeleton

Skeleton loader shown while notifications are being fetched.

• Public element: <velt-notifications-panel-skeleton>
• Wireframe tag: <velt-notifications-panel-skeleton-wireframe>

Property	Value
Extra variables	None.
shouldShow	Driven by parent — renders while isLoading === true.
Host classes	skeleton skeleton-item-card (card), shine skeleton-item-avatar (avatar shimmer), skeleton-item-info / skeleton-iten-name-info / skeleton-item-body-info (layout pieces)

---

notifications-panel-header

Tab strip across the top of the panel. Renders the four tab children.

• Public element: <velt-notifications-panel-header>
• Wireframe tag: <velt-notifications-panel-header-wireframe>
• Children: *-tab-for-you, *-tab-people, *-tab-documents, *-tab-all.

Property	Value
Extra variables	None at the header level.
Host classes	v-notifications-panel-header velt-notifications-panel--header (wrapper), v-tabs-container velt-notifications-panel--tabs-container (tabs container)

---

notifications-panel-header-tab-for-you / -tab-people / -tab-documents / -tab-all

The four tab buttons. Same shape; differ only in which selectedTab value they highlight.

• Public elements: <velt-notifications-panel-header-tab-for-you>, <velt-notifications-panel-header-tab-people>, <velt-notifications-panel-header-tab-documents>, <velt-notifications-panel-header-tab-all>
• Wireframe tags: <velt-notifications-panel-header-tab-for-you-wireframe> (and the three analogous tags).

Property	Value
Extra variables	None.
shouldShow	Each tab is gated on tabConfig.<tabId> being truthy. The selected modifier class is applied when selectedTab === TABS.<TabId>.
Host class	v-tab velt-notifications-panel--tab
Conditional class	selected / velt-notifications-panel--tab-selected (when selectedTab === TABS.<TabId>)

---

notifications-panel-content

The body container. Renders one of four content children based on selectedTab.

• Public element: <velt-notifications-panel-content>
• Wireframe tag: <velt-notifications-panel-content-wireframe>
• Children: *-content-for-you, *-content-people, *-content-documents, *-content-all, *-content-list, *-content-load-more, *-content-all-read-container.

Property	Value
Extra variables	None at the container level.

---

notifications-panel-content-for-you / -content-all

Tab body for the For-you / All tabs. Both render a chronological list (notificationsByDate for All, notificationsForYouInSession for For-you).

• Wireframe tags: <velt-notifications-panel-content-for-you-wireframe>, <velt-notifications-panel-content-all-wireframe>.

Property	Value
Extra variables	None at the container level — descendants receive notification per iteration.
shouldShow	Gated by parent on selectedTab matching this tab id.
Host class	v-notifications velt-notifications-panel-content
Conditional class	velt-notifications-panel-content--sidebar-panel (when panelOpenMode === 'sidebar')

---

notifications-panel-content-people

Tab body for the People tab. Iterates notificationsByUserMap.

• Wireframe tag: <velt-notifications-panel-content-people-wireframe>.

Property	Value
Extra variables	None at the container level — list-item descendants receive user and userNotifications per row.
shouldShow	Gated by parent on selectedTab === 'people'.
Host class	v-users velt-notifications-panel-content--people

---

notifications-panel-content-documents

Tab body for the Documents tab. Iterates notificationsByDocumentId.

• Wireframe tag: <velt-notifications-panel-content-documents-wireframe>.

Property	Value
Extra variables	None at the container level — list-item descendants receive documentId, documentName, documentNotifications.
shouldShow	Gated by parent on selectedTab === 'documents'.
Host class	v-documents velt-notifications-panel-content--document

---

notifications-panel-content-list

Iteration primitive that renders one row per notification. Injected with the per-tab notifications array.

• Public element: <velt-notifications-panel-content-list>
• Wireframe tag: <velt-notifications-panel-content-list-wireframe>

Variable	Type	Example
notification	Notification	<velt-data field="notification.title" />
notifications	Notification[]	<velt-data field="notifications.length" />

---

notifications-panel-content-load-more

“Load more” button at the bottom of paginated lists.

• Public element: <velt-notifications-panel-content-load-more>
• Wireframe tag: <velt-notifications-panel-content-load-more-wireframe>

Variable	Type	Example
notifications	Notification[]	<velt-data field="notifications.length" />
isLoadMoreVisible	boolean	velt-if="{isLoadMoreVisible}"

Property	Value
shouldShow	isLoadMoreVisible === true
Host class	v-load-more-btn velt-notifications-panel--content-load-more

---

notifications-panel-content-all-read-container

Empty-state shown when the user has no unread notifications.

• Public element: <velt-notifications-panel-content-all-read-container>
• Wireframe tag: <velt-notifications-panel-content-all-read-container-wireframe>

Variable	Type	Example
isAllRead	boolean	velt-if="{isAllRead}"

Property	Value
shouldShow	isAllRead === true
Host classes	all-notifications-read-container velt-notifications-panel--all-read-container (wrapper), notifications-read-emoji velt-notifications-panel--emoji (emoji icon), all-notifications-read-message velt-notifications-panel--message (message text)

---

notifications-panel-settings

The settings view inside the panel. Renders header + accordion list + footer (mute-all section). Visible when the user clicks the settings button.

• Public element: <velt-notifications-panel-settings>
• Wireframe tag: <velt-notifications-panel-settings-wireframe>
• Children: *-settings-header, *-settings-back-button, *-settings-title, *-settings-description, *-settings-accordion, *-settings-list, *-settings-footer, *-settings-mute-all-title, *-settings-mute-all-description, *-settings-mute-all-toggle.

Property	Value
Extra variables	None at the container level — accordion descendants receive setting and option per iteration.
shouldShow	settingsOpen === true. The button-rendering parent additionally requires settingsEnabled === true.
Host classes	velt-notification-panel--settings (wrapper), velt-notification-panel--settings-section (each section)

Deeply-Nested Wireframe Tags

The four tab content primitives + per-tab list-items + the settings accordion all decompose further. Each tag below has its own <velt-notifications-panel-...-wireframe> registration and inherits context variables from its parent.

Tab header explicit tags

Tag	Notes	Example
<velt-notifications-panel-header-tab-for-you-wireframe>	For-you tab.	velt-class="'selected': '{selectedTab} === {TABS.ForYou}'"
<velt-notifications-panel-header-tab-people-wireframe>	People tab.	velt-class="'selected': '{selectedTab} === {TABS.People}'"
<velt-notifications-panel-header-tab-documents-wireframe>	Documents tab.	velt-class="'selected': '{selectedTab} === {TABS.Documents}'"
<velt-notifications-panel-header-tab-all-wireframe>	All tab.	velt-class="'selected': '{selectedTab} === {TABS.All}'"

For-you / generic list-item tags

Inside each, notification is the per-iteration variable.

Tag	Notes	Example
<velt-notifications-panel-content-list-item-wireframe>	A single notification row.	velt-class="'is-unread': '!{notification.read}'"
<velt-notifications-panel-content-list-item-avatar-wireframe>	Avatar of notification.from.	<velt-data field="notification.from.photoUrl" />
<velt-notifications-panel-content-list-item-headline-wireframe>	Headline text.	<velt-data field="notification.title" />
<velt-notifications-panel-content-list-item-body-wireframe>	Body text.	<velt-data field="notification.message" />
<velt-notifications-panel-content-list-item-file-name-wireframe>	Document-name fragment.	<velt-data field="notification.documentName" />
<velt-notifications-panel-content-list-item-time-wireframe>	Relative timestamp.	<velt-data field="notification.createdAt" />
<velt-notifications-panel-content-list-item-unread-wireframe>	Unread indicator dot.	velt-if="!{notification.read}"

People-tab list-item tags

Each row represents a user with their notifications grouped under them.

Tag	Notes	Example
<velt-notifications-panel-content-people-list-wireframe>	The list wrapper.	(iterates notificationsByUserMap)
<velt-notifications-panel-content-people-list-item-wireframe>	A single user row.	velt-class="'expanded': {usersExpanded[user.email]}"
<velt-notifications-panel-content-people-list-item-avatar-wireframe>	User avatar.	<velt-data field="user.photoUrl" />
<velt-notifications-panel-content-people-list-item-name-wireframe>	User name.	<velt-data field="user.name" />
<velt-notifications-panel-content-people-list-item-content-wireframe>	Expanded notification list under this user.	(composes generic list-items)
<velt-notifications-panel-content-people-list-item-count-wireframe>	Unread-count badge for this user.	<velt-data field="userNotifications.length" />

Documents-tab list-item tags

Tag	Notes	Example
<velt-notifications-panel-content-documents-list-item-wireframe>	A single document row.	velt-class="'expanded': {documentExpanded[documentId]}"
<velt-notifications-panel-content-documents-list-item-name-wireframe>	Document name.	<velt-data field="documentName" />
<velt-notifications-panel-content-documents-list-item-content-wireframe>	Expanded notification list under this document.	(composes generic list-items)
<velt-notifications-panel-content-documents-list-item-count-wireframe>	Notification count for this document.	<velt-data field="documentNotifications.length" />
<velt-notifications-panel-content-documents-list-item-unread-wireframe>	Unread indicator.	velt-if="{hasUnread}"

All-tab list-item tags

Tag	Notes	Example
<velt-notifications-panel-content-all-list-wireframe>	The list wrapper. Iterates notificationsByDate.	(composes per-date rows)
<velt-notifications-panel-content-all-list-item-wireframe>	A single date-group row.	<velt-data field="dateGroup.displayName" />
<velt-notifications-panel-content-all-list-item-content-wireframe>	Notification list within a date group.	(composes generic list-items)
<velt-notifications-panel-content-all-list-item-label-wireframe>	Date label.	<velt-data field="dateGroup.displayName" />

Settings tags

The settings view’s accordion decomposes per row. setting and option are per-iteration variables.

Tag	Notes	Example
<velt-notifications-panel-settings-header-wireframe>	Header bar of the settings view.	(composes back-button + title)
<velt-notifications-panel-settings-header-title-wireframe>	Header title.	(static label)
<velt-notifications-panel-settings-back-button-wireframe>	Back button.	(click handler closes the settings view)
<velt-notifications-panel-settings-title-wireframe>	Section title.	(static label)
<velt-notifications-panel-settings-description-wireframe>	Section description.	(static label)
<velt-notifications-panel-settings-list-wireframe>	Accordion list wrapper.	(iterates settingsConfig)
<velt-notifications-panel-settings-accordion-wireframe>	A single accordion row.	velt-class="'expanded': {settingsAccordionExpanded[setting.id]}"
<velt-notifications-panel-settings-accordion-trigger-wireframe>	Trigger of an accordion row.	(click handler)
<velt-notifications-panel-settings-accordion-trigger-icon-wireframe>	Trigger icon.	<velt-data field="setting.name" />
<velt-notifications-panel-settings-accordion-trigger-label-wireframe>	Trigger label.	<velt-data field="setting.name" />
<velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>	Currently-selected value displayed on the trigger.	<velt-data field="settingsSelectedOption[setting.id]" />
<velt-notifications-panel-settings-accordion-content-wireframe>	Expanded content (option list).	(iterates setting.options)
<velt-notifications-panel-settings-accordion-content-item-wireframe>	Per-option row.	velt-class="'selected': '{option.value} === {settingsSelectedOption[setting.id]}'"
<velt-notifications-panel-settings-accordion-content-item-icon-wireframe>	Option icon.	<velt-data field="option.icon" />
<velt-notifications-panel-settings-accordion-content-item-label-wireframe>	Option label.	<velt-data field="option.label" />
<velt-notifications-panel-settings-footer-wireframe>	Footer wrapper holding the mute-all section.	(composes mute-all children)
<velt-notifications-panel-settings-mute-all-title-wireframe>	”Mute all” label.	(static label)
<velt-notifications-panel-settings-mute-all-description-wireframe>	Description text.	(static label)
<velt-notifications-panel-settings-mute-all-toggle-wireframe>	Toggle switch bound to settingsMutedAll.	velt-class="'on': {settingsMutedAll}"

Example

A minimal notifications panel with a title bar (title + close + settings + read-all buttons) and the per-tab content area.

React / Next.js

<VeltWireframe>
  <VeltNotificationsPanelWireframe>
    <VeltNotificationsPanelWireframe.Header>
      <div className="my-panel__title">
        <VeltNotificationsPanelWireframe.Title />
        <VeltNotificationsPanelWireframe.ReadAllButton />
        <VeltNotificationsPanelWireframe.SettingsButton />
        <VeltNotificationsPanelWireframe.CloseButton />
      </div>
    </VeltNotificationsPanelWireframe.Header>
    <VeltNotificationsPanelWireframe.Content />
  </VeltNotificationsPanelWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe>
  <velt-notifications-panel-wireframe>
    <velt-notifications-panel-header-wireframe>
      <div class="my-panel__title">
        <velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
        <velt-notifications-panel-read-all-button-wireframe></velt-notifications-panel-read-all-button-wireframe>
        <velt-notifications-panel-settings-button-wireframe></velt-notifications-panel-settings-button-wireframe>
        <velt-notifications-panel-close-button-wireframe></velt-notifications-panel-close-button-wireframe>
      </div>
    </velt-notifications-panel-header-wireframe>
    <velt-notifications-panel-content-wireframe></velt-notifications-panel-content-wireframe>
  </velt-notifications-panel-wireframe>
</velt-wireframe>

Related

• Notifications Panel Wireframes — composition reference for the wireframe tags themselves.
• Notifications Panel Primitives — granular components if you don’t need a full wireframe.
• Notifications Tool Wireframe Variables — variables for the bell-icon trigger that opens this panel (most variables are shared).
• Template Variables — overview of the velt-data / velt-if / velt-class system.