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

## 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`](https://velt.dev/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.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltNotificationsToolIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-notifications-tool-icon></velt-notifications-tool-icon>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltNotificationsToolUnreadIcon

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltNotificationsToolUnreadIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltNotificationsToolLabel

Text label displayed in the notifications tool trigger button.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltNotificationsToolLabel />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-notifications-tool-label></velt-notifications-tool-label>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltNotificationsToolUnreadCount

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltNotificationsToolUnreadCount />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).


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