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

​
VeltSidebarButtonWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSidebarButtonWireframe>
        <VeltSidebarButtonWireframe.Icon />
        <VeltSidebarButtonWireframe.CommentsCount />
    </VeltSidebarButtonWireframe>
    
</VeltWireframe>

​
Icon

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSidebarButtonWireframe.Icon />
</VeltWireframe>

​
CommentsCount

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSidebarButtonWireframe.CommentsCount />
</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
  • React / Next.js
  • Other Frameworks

​
Example

<VeltSidebarButton shadowDom={false} />

{/* If you use floating mode, you can turn off the shadow dom for the sidebar using this: */}
<VeltSidebarButton shadowDom={false} sidebarShadowDom={false} />

​
Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. Default: false To enable Dark Mode for sidebar button:
  • React / Next.js
  • Other Frameworks

​
Example

<VeltSidebarButton darkMode={true} />

​
API methods

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();