> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Comments Sidebar Button Wireframes

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

> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## VeltSidebarButtonWireframe

![](https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/sidebar-button-light.png?fit=max\&auto=format\&n=gY7ilEx2g4g3-HVe\&q=85\&s=6094c385cc4f2bbe04af6b1d5105853f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSidebarButtonWireframe>
>         <VeltSidebarButtonWireframe.Icon />
>         <VeltSidebarButtonWireframe.CommentsCount />
>         <VeltSidebarButtonWireframe.UnreadIcon />
>     </VeltSidebarButtonWireframe>
>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <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

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/sidebar-button-icon.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=61d34a0ff36e2c1f5aa76355cec31d08)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSidebarButtonWireframe.Icon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
> </velt-wireframe>
> ```

### CommentsCount

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/sidebar-button-count.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=7a25c0d721dfeca1d02549444b8214cc)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSidebarButtonWireframe.CommentsCount />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-sidebar-button-comments-count-wireframe></velt-sidebar-button-comments-count-wireframe>
> </velt-wireframe>
> ```

### UnreadIcon

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltSidebarButtonWireframe.UnreadIcon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <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`

> [tab] React / Next.js
>
> ### Example
>
> ```jsx theme={null}
> <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} />
> ```

> [tab] Other Frameworks
>
> ### Example
>
> ```html theme={null}
> <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

![](https://mintcdn.com/velt/vGgIoGfoceFP8dEI/images/sidebar-button-dark.png?fit=max\&auto=format\&n=vGgIoGfoceFP8dEI\&q=85\&s=d87f596fbf04ef9f99f5f143467f2824)

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:

> [tab] React / Next.js
>
> ### Example
>
> ```js theme={null}
> <VeltSidebarButton darkMode={true} />
> ```
>
> ### API methods
>
> ```jsx theme={null}
> const commentElement = client.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```

> [tab] Other Frameworks
>
> ### Example
>
> ```js theme={null}
> <velt-sidebar-button dark-mode="true"></velt-sidebar-button>
> ```
>
> ### API methods
>
> ```jsx theme={null}
> const commentElement = Velt.getCommentElement();
> commentElement.enableDarkMode();
> commentElement.disableDarkMode();
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.