We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
VeltNotificationsToolWireframe

<VeltWireframe>
    <VeltNotificationsToolWireframe>
        <VeltNotificationsToolWireframe.Icon />
        <VeltNotificationsToolWireframe.UnreadIcon />
        <VeltNotificationsToolWireframe.UnreadCount />
        <VeltNotificationsToolWireframe.Label />
    </VeltNotificationsToolWireframe>
</VeltWireframe>

​
Styling

​
Disable ShadowDOM

  • By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
  • Disable the shadow dom to apply your custom CSS to the component.

Default: true

Example

<VeltNotificationsTool shadowDom={false} panelShadowDom={false} />

​
Dark Mode

Default: false

<VeltNotificationsTool darkMode={true} />

​
Variant

You can define and use variants for the Notification Tool or the Notification Panel.

  1. variant: For the Notification Tool.
  2. panelVariant: For the Notification Panel.
<VeltNotificationsTool variant='tool1' panelVariant='panel1'/>