Notifications Tool Wireframe Variables

Template variables exposed by the Notifications Tool 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 Tool wireframe powers the small bell-icon button (with unread-count badge) customers place in their app’s toolbar to open the linked Notifications Panel. It supports a numeric badge or an unread-only icon mode (dot indicator without a number). Variables below are available inside any <velt-notifications-tool-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	<velt-data field="var" />	<velt-data field="unreadNotificationsForYou.length" />
Hide / show conditionally	velt-if="{var}"	velt-if="{unreadNotificationsForYou.length} > 0"
Toggle a CSS class	velt-class="'cls': {var}"	velt-class="'panel-open': {notificationsPanelVisible}"

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

The tool shares its componentConfigSignal with the linked panel. Every variable on the Notifications Panel Wireframe Variables page resolves here too — only the two tool-specific entries below are documented as new on this page.

Data State

Tool-specific data — drives the bell icon, the unread badge, and the active-state styling.

Variable	Type	Description	Example
unreadNotificationsForYou	Notification[]	Unread notifications list. Length drives the count badge.	<velt-data field="unreadNotificationsForYou.length" />

UI State

Variable	Type	Description	Example
notificationsPanelVisible	boolean	Linked panel is currently open. Drives the active modifier on the trigger.	velt-class="'panel-open': {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" />

The tool’s componentConfigSignal also includes tabConfig, shadowDom, panelShadowDom, considerAllNotifications, template, and settingsLayout — all set on the public element as kebab-case attributes (see Common Props below). Inside a wireframe these still resolve as bare names.

Common Props

The tool inherits the same base inputs as the panel — see Notifications Panel — Common Props.

The root <velt-notifications-tool> element additionally accepts these public attributes:

React Prop	HTML Attribute	Type	Default	Description
considerAllNotifications	consider-all-notifications	boolean | "true" | "false"	false	Count all notifications, not just unread.
shadowDom	shadow-dom	boolean | "true" | "false"	true	Wrap the tool in Shadow DOM.
panelShadowDom	panel-shadow-dom	boolean | "true" | "false"	true	Wrap the linked panel in Shadow DOM.
settingsLayout	settings-layout	'accordion' | …	'accordion'	Forward to the linked panel.
variant	variant	string	—	Wireframe variant id.

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).

For the full type set used inside the linked panel — see Notifications Panel — Type Reference.

Subcomponents

Each subcomponent below has its own wireframe tag.

notifications-tool (root)

The bell-icon trigger.

• Public element: <velt-notifications-tool>
• Wireframe tag: <velt-notifications-tool-wireframe>
• Variant: read from componentConfig.uiState.variant.

Property	Value
Extra variables	None — root only sees common variables.

Classes

Class	Applied when
v-document-viewer-tread-container velt-notifications-tool	Always on the host wrapper.
action-btn velt-notifications-tool--action-button	Inner clickable button.
active / velt-notification-tool-open	notificationsPanelVisible is true.
velt-notifications-tool--container	Inner content wrapper.
velt-notifications-panel-sidebar-container	Sidebar-mode panel anchor.

React / Next.js

<VeltWireframe>
  <VeltNotificationsToolWireframe veltClass="'panel-open': {notificationsPanelVisible}">
    <button className="my-bell">
      <VeltNotificationsToolWireframe.Icon />
      <VeltNotificationsToolWireframe.UnreadIcon />
      <VeltNotificationsToolWireframe.Label />
      <VeltNotificationsToolWireframe.UnreadCount />
    </button>
  </VeltNotificationsToolWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe>
  <velt-notifications-tool-wireframe>
    <button class="my-bell" velt-class="'panel-open': {notificationsPanelVisible}">
      <velt-notifications-tool-icon-wireframe></velt-notifications-tool-icon-wireframe>
      <velt-notifications-tool-unread-icon-wireframe></velt-notifications-tool-unread-icon-wireframe>
      <velt-notifications-tool-label-wireframe></velt-notifications-tool-label-wireframe>
      <velt-notifications-tool-unread-count-wireframe></velt-notifications-tool-unread-count-wireframe>
    </button>
  </velt-notifications-tool-wireframe>
</velt-wireframe>

---

notifications-tool-icon

The default bell icon shown when there are no unread notifications.

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

Property	Value
Extra variables	None.
shouldShow	Parent gates this on unreadNotificationsForYou.length === 0.

Classes

Class	Applied when
action-btn-icon velt-notifications-tool--icon	Always on the inner SVG.

---

notifications-tool-unread-icon

The bell-icon variant shown when there are unread notifications (different colour / shape).

• Public element: <velt-notifications-tool-unread-icon>
• Wireframe tag: <velt-notifications-tool-unread-icon-wireframe>

Property	Value
Extra variables	None.
shouldShow	Parent gates this on unreadNotificationsForYou.length > 0.

Classes

Class	Applied when
action-btn-icon velt-notifications-tool--icon	Always on the inner SVG.

---

notifications-tool-label

Optional “Notifications” label next to the bell.

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

Property	Value
Extra variables	None.

Classes

Class	Applied when
action-btn-label velt-notifications-tool--label	Always on the host span.

---

notifications-tool-unread-count

The unread-count badge (“3”, “12”, …). Hidden when there are no unread notifications.

• Public element: <velt-notifications-tool-unread-count>
• Wireframe tag: <velt-notifications-tool-unread-count-wireframe>

Property	Value
Extra variables	None.
shouldShow	unreadNotificationsForYou.length > 0

Related

• Notifications Tool Wireframes — composition reference for the wireframe tags themselves.
• Notifications Tool Primitives — granular components if you don’t need a full wireframe.
• Notifications Panel Wireframe Variables — the linked panel’s full variable set, all of which is shared with the tool.
• Template Variables — overview of the velt-data / velt-if / velt-class system.