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

React / Next.js

<VeltNotificationsToolIcon />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-notifications-tool-icon></velt-notifications-tool-icon>

Attributes: Common attributes only (see Common Inputs section).

---

VeltNotificationsToolUnreadIcon

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

React / Next.js

<VeltNotificationsToolUnreadIcon />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-notifications-tool-unread-icon></velt-notifications-tool-unread-icon>

Attributes: Common attributes only (see Common Inputs section).

---

VeltNotificationsToolLabel

Text label displayed in the notifications tool trigger button.

React / Next.js

<VeltNotificationsToolLabel />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-notifications-tool-label></velt-notifications-tool-label>

Attributes: Common attributes only (see Common Inputs section).

---

VeltNotificationsToolUnreadCount

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

React / Next.js

<VeltNotificationsToolUnreadCount />

Props: Common inputs only (see Common Inputs section).

Other Frameworks

<velt-notifications-tool-unread-count></velt-notifications-tool-unread-count>

Attributes: Common attributes only (see Common Inputs section).