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

<Tip>
  Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).
</Tip>

## 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`](/docs/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>


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