Comments Sidebar Button Wireframes

Wireframe components for building custom Comments Sidebar Button interfaces with maximum flexibility.

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

VeltSidebarButtonWireframe

React / Next.js

<VeltWireframe>
    <VeltSidebarButtonWireframe>
        <VeltSidebarButtonWireframe.Icon />
        <VeltSidebarButtonWireframe.CommentsCount />
        <VeltSidebarButtonWireframe.UnreadIcon />
    </VeltSidebarButtonWireframe>

</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-sidebar-button-wireframe>
        <velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
        <velt-sidebar-button-comments-count-wireframe></velt-sidebar-button-comments-count-wireframe>
        <velt-sidebar-button-unread-icon-wireframe></velt-sidebar-button-unread-icon-wireframe>
    </velt-sidebar-button-wireframe>
</velt-wireframe>

Icon

React / Next.js

<VeltWireframe>
    <VeltSidebarButtonWireframe.Icon />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
</velt-wireframe>

CommentsCount

React / Next.js

<VeltWireframe>
    <VeltSidebarButtonWireframe.CommentsCount />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-sidebar-button-comments-count-wireframe></velt-sidebar-button-comments-count-wireframe>
</velt-wireframe>

UnreadIcon

React / Next.js

<VeltWireframe>
    <VeltSidebarButtonWireframe.UnreadIcon />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-sidebar-button-unread-icon-wireframe></velt-sidebar-button-unread-icon-wireframe>
</velt-wireframe>

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

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} />

Other Frameworks

Example

<velt-sidebar-button shadow-dom="false"></velt-sidebar-button>

<!-- If you use floating mode, you can turn off the shadow dom for the sidebar using this: -->
<velt-sidebar-button shadow-dom="false" sidebar-shadow-dom="false"></velt-sidebar-button>

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

Example

<VeltSidebarButton darkMode={true} />

API methods

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

Other Frameworks

Example

<velt-sidebar-button dark-mode="true"></velt-sidebar-button>

API methods

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