> ## 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.

# Persistent Comment Mode Banner

> The persistent comment mode banner that appears when persistent mode is enabled and user is adding a comment.

> [!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.

## VeltPersistentCommentModeWireframe

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/persistent-banner/persistent-banner-overview.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=5c3bef6c7fb82ac49746995d90c5a333)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltPersistentCommentModeWireframe>
>         <VeltPersistentCommentModeWireframe.CloseButton />
>         <VeltPersistentCommentModeWireframe.Label />
>     </VeltPersistentCommentModeWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-persistent-comment-mode-wireframe>
>         <velt-persistent-comment-mode-close-button-wireframe></velt-persistent-comment-mode-close-button-wireframe>
>         <velt-persistent-comment-mode-label-wireframe></velt-persistent-comment-mode-label-wireframe>
>     </velt-persistent-comment-mode-wireframe>
> </velt-wireframe>
> ```

## CloseButton

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/persistent-banner/persistent-banner-close.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=dae81afd11fd9cb6f7c7ec556b5b8831)

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

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

## Label

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltPersistentCommentModeWireframe.Label>
>         <VeltPersistentCommentModeWireframe.Label.Public />
>         <VeltPersistentCommentModeWireframe.Label.Private />
>     </VeltPersistentCommentModeWireframe.Label>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-persistent-comment-mode-label-wireframe>
>         <velt-persistent-comment-mode-label-public-wireframe></velt-persistent-comment-mode-label-public-wireframe>
>         <velt-persistent-comment-mode-label-private-wireframe></velt-persistent-comment-mode-label-private-wireframe>
>     </velt-persistent-comment-mode-label-wireframe>
> </velt-wireframe>
> ```

### Label.Public

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/persistent-banner/persistent-banner-label-public.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=8e78623eb644928625883110f627e20a)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltPersistentCommentModeWireframe.Label.Public />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-persistent-comment-mode-label-public-wireframe></velt-persistent-comment-mode-label-public-wireframe>
> </velt-wireframe>
> ```

### Label.Private

![](https://mintcdn.com/velt/y_bUi9B-cnWLxN8L/images/customization/comments/persistent-banner/persistent-banner-label-private.png?fit=max\&auto=format\&n=y_bUi9B-cnWLxN8L\&q=85\&s=fbe86a474872d92209e4ff692d479f52)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltPersistentCommentModeWireframe.Label.Private />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-persistent-comment-mode-label-private-wireframe></velt-persistent-comment-mode-label-private-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
>
> ```jsx theme={null}
> <VeltComments persistentCommentShadowDom={false}/>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comments persistent-comment-shadow-dom="false"></velt-comments>
> ```


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