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

VeltTextCommentToolbarWireframe

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTextCommentToolbarWireframe>
        <VeltTextCommentToolbarWireframe.CommentAnnotation />
        <VeltTextCommentToolbarWireframe.Divider />
        <VeltTextCommentToolbarWireframe.Copywriter />
        <VeltTextCommentToolbarWireframe.Generic />
    </VeltTextCommentToolbarWireframe>
</VeltWireframe>

CommentAnnotation

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTextCommentToolbarWireframe.CommentAnnotation />
</VeltWireframe>

Divider

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Divider />
</VeltWireframe>

Copywriter

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Copywriter />
</VeltWireframe>

Generic

  • React / Next.js
  • Other Frameworks
  • Other Frameworks
<VeltWireframe>
    <VeltTextCommentToolbarWireframe.Generic />
</VeltWireframe>

Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. Default: false
  • React / Next.js
  • Other Frameworks
Using Props:
<VeltComments textCommentToolbarDarkMode={true} />
Using API:
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
I