> ## 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](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## 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](../notifications-panel/wireframe-variables). 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](../notifications-panel/wireframe-variables) page resolves here too — only the two **tool-specific** entries below are documented as new on this page.
</Note>

## Data State

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

| Variable                    | Type                                                                     | Description                                               | Example                                                  |
| --------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------- | -------------------------------------------------------- |
| `unreadNotificationsForYou` | [`Notification`](/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](../notifications-panel/wireframe-variables#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](/api-reference/sdk/models/data-models):

| Type                                                                 | Description                                                                                                                  |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| [`Notification`](/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](../notifications-panel/wireframe-variables#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.           |

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

***

### `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](./wireframes) — composition reference for the wireframe tags themselves.
* [Notifications Tool Primitives](./primitives) — granular components if you don't need a full wireframe.
* [Notifications Panel Wireframe Variables](../notifications-panel/wireframe-variables) — the linked panel's full variable set, all of which is shared with the tool.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.