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. SeeNotificationsPrimitiveCommonProps 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
- Other Frameworks
VeltNotificationsToolUnreadIcon
Icon shown in the notifications tool trigger when there are unread notifications.- React / Next.js
- Other Frameworks
VeltNotificationsToolLabel
Text label displayed in the notifications tool trigger button.- React / Next.js
- Other Frameworks
VeltNotificationsToolUnreadCount
Badge showing the count of unread notifications on the tool trigger.- React / Next.js
- Other Frameworks