Notifications Tool Wireframe Variables

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, notificationSource, actionType, isUnread, actionUser, timestamp, displayHeadlineMessage, displayBodyMessage, 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
Other Frameworks

<VeltNotificationsToolWireframe
  velt-class="'panel-open': {notificationsPanelVisible}, 'has-unread': {unreadNotificationsForYou.length} > 0">
  <VeltNotificationsToolWireframe.Icon
    velt-if="{unreadNotificationsForYou.length} === 0" />
  <VeltNotificationsToolWireframe.UnreadIcon
    velt-if="{unreadNotificationsForYou.length} > 0" />
  <VeltNotificationsToolWireframe.Label />
  <VeltNotificationsToolWireframe.UnreadCount />
</VeltNotificationsToolWireframe>

<velt-notifications-tool-wireframe
  velt-class="'panel-open': {notificationsPanelVisible}, 'has-unread': {unreadNotificationsForYou.length} > 0">
  <velt-notifications-tool-icon-wireframe
    velt-if="{unreadNotificationsForYou.length} === 0"></velt-notifications-tool-icon-wireframe>
  <velt-notifications-tool-unread-icon-wireframe
    velt-if="{unreadNotificationsForYou.length} > 0"></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>
</velt-notifications-tool-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`

React / Next.js
Other Frameworks

<VeltNotificationsToolWireframe.UnreadCount
  velt-if="{unreadNotificationsForYou.length} > 0">
  <span><velt-data field="unreadNotificationsForYou.length" /></span>
</VeltNotificationsToolWireframe.UnreadCount>

<velt-notifications-tool-unread-count-wireframe
  velt-if="{unreadNotificationsForYou.length} > 0">
  <span><velt-data field="unreadNotificationsForYou.length"></velt-data></span>
</velt-notifications-tool-unread-count-wireframe>

Putting it together

A typical Notifications Tool button that swaps its icon between unread / read state, lights up while the panel is open, and shows a numeric badge:

React / Next.js
Other Frameworks

<VeltNotificationsToolWireframe
  velt-class="'is-active': {notificationsPanelVisible}">
  <button className="my-notif-btn">
    <VeltNotificationsToolWireframe.UnreadIcon
      velt-if="{unreadNotificationsForYou.length} > 0" />
    <VeltNotificationsToolWireframe.Icon
      velt-if="{unreadNotificationsForYou.length} === 0" />
    <VeltNotificationsToolWireframe.UnreadCount
      velt-if="{unreadNotificationsForYou.length} > 0">
      <span className="my-notif-btn__count">
        <velt-data field="unreadNotificationsForYou.length" />
      </span>
    </VeltNotificationsToolWireframe.UnreadCount>
  </button>
</VeltNotificationsToolWireframe>

<velt-notifications-tool-wireframe
  velt-class="'is-active': {notificationsPanelVisible}">
  <button class="my-notif-btn">
    <velt-notifications-tool-unread-icon-wireframe
      velt-if="{unreadNotificationsForYou.length} > 0"></velt-notifications-tool-unread-icon-wireframe>
    <velt-notifications-tool-icon-wireframe
      velt-if="{unreadNotificationsForYou.length} === 0"></velt-notifications-tool-icon-wireframe>
    <velt-notifications-tool-unread-count-wireframe
      velt-if="{unreadNotificationsForYou.length} > 0">
      <span class="my-notif-btn__count">
        <velt-data field="unreadNotificationsForYou.length"></velt-data>
      </span>
    </velt-notifications-tool-unread-count-wireframe>
  </button>
</velt-notifications-tool-wireframe>

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.

Concepts

Async Collaboration

Realtime Collaboration

Notifications Tool Wireframe Variables

Overview

Data State

UI State

Common Props

Type Reference

Subcomponents

`notifications-tool` (root)

Classes

`notifications-tool-icon`

Classes

`notifications-tool-unread-icon`

Classes

`notifications-tool-label`

Classes

`notifications-tool-unread-count`

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Data State

​UI State

​Common Props

​Type Reference

​Subcomponents

​notifications-tool (root)

​Classes

​notifications-tool-icon

​Classes

​notifications-tool-unread-icon

​Classes

​notifications-tool-label

​Classes

​notifications-tool-unread-count

​Putting it together

​Related

Overview

Data State

UI State

Common Props

Type Reference

Subcomponents

`notifications-tool` (root)

Classes

`notifications-tool-icon`

Classes

`notifications-tool-unread-icon`

Classes

`notifications-tool-label`

Classes

`notifications-tool-unread-count`

Putting it together

Related