Skip to main content

​
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 PropHTML AttributeTypeDefaultDescription
variantvariantstring—Visual variant for the component.
darkModedark-modebooleanfalseEnables dark mode rendering.
shadowDomshadow-dombooleanfalseRenders the component inside a Shadow DOM.
parentLocalUIStateparent-local-ui-stateobject—Local UI state passed down from a parent primitive.

​
Components

​
VeltNotificationsToolIcon

Icon displayed in the notifications tool trigger button. 
<VeltNotificationsToolIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsToolUnreadIcon

Icon shown in the notifications tool trigger when there are unread notifications. 
<VeltNotificationsToolUnreadIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsToolLabel

Text label displayed in the notifications tool trigger button. 
<VeltNotificationsToolLabel />
Props: Common inputs only (see Common Inputs section).

​
VeltNotificationsToolUnreadCount

Badge showing the count of unread notifications on the tool trigger. 
<VeltNotificationsToolUnreadCount />
Props: Common inputs only (see Common Inputs section).