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

> [!NOTE]
>
> New to wireframes? Start with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) 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](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.md). 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.

> [!NOTE]
>
> The tool shares its `componentConfigSignal` with the linked panel. Every variable on the [Notifications Panel Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.md) 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`](https://velt.dev/docs/api-reference/sdk/models/data-models#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](#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](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.md#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](https://velt.dev/docs/api-reference/sdk/models/data-models.md):

| Type | Description |
| - | - |
| [`Notification`](https://velt.dev/docs/api-reference/sdk/models/data-models#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](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.md#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. |

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>   <VeltNotificationsToolWireframe veltClass="'panel-open': {notificationsPanelVisible}">
>     <button className="my-bell">
>       <VeltNotificationsToolWireframe.Icon />
>       <VeltNotificationsToolWireframe.UnreadIcon />
>       <VeltNotificationsToolWireframe.Label />
>       <VeltNotificationsToolWireframe.UnreadCount />
>     </button>
>   </VeltNotificationsToolWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <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](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-tool/wireframes.md) — composition reference for the wireframe tags themselves.
* [Notifications Tool Primitives](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-tool/primitives.md) — granular components if you don't need a full wireframe.
* [Notifications Panel Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/notifications/notifications-panel/wireframe-variables.md) — the linked panel's full variable set, all of which is shared with the tool.
* [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.