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

> Pprimitive components for building custom Notifications tool interfaces with maximum flexibility.

## Overview

The Notifications Primitives API provides granular components that can be used independently to build fully custom notification tool and panel interfaces. All primitives share a common set of inputs documented below; list-type primitives additionally support template forwarding via slot attributes (`[listItemTemplate]`, `[itemTemplate]`, `[triggerTemplate]`).

## Common Inputs

All Notifications primitive components accept the following inputs. See [`NotificationsPrimitiveCommonProps`](/api-reference/sdk/models/data-models#notificationsprimitivecommonprops) for the full type definition.

| React Prop           | HTML Attribute          | Type      | Default | Description                                         |
| -------------------- | ----------------------- | --------- | ------- | --------------------------------------------------- |
| `variant`            | `variant`               | `string`  | —       | Visual variant for the component.                   |
| `darkMode`           | `dark-mode`             | `boolean` | `false` | Enables dark mode rendering.                        |
| `shadowDom`          | `shadow-dom`            | `boolean` | `false` | Renders the component inside a Shadow DOM.          |
| `parentLocalUIState` | `parent-local-ui-state` | `object`  | —       | Local UI state passed down from a parent primitive. |

***

## Components

### VeltNotificationsToolIcon

Icon displayed in the notifications tool trigger button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-icon></velt-notifications-tool-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsToolUnreadIcon

Icon shown in the notifications tool trigger when there are unread notifications.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolUnreadIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-unread-icon></velt-notifications-tool-unread-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsToolLabel

Text label displayed in the notifications tool trigger button.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolLabel />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-label></velt-notifications-tool-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltNotificationsToolUnreadCount

Badge showing the count of unread notifications on the tool trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsToolUnreadCount />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-notifications-tool-unread-count></velt-notifications-tool-unread-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>