> ## Documentation Index
> Fetch the complete documentation index at: https://velt-codex-ui-customization-guide-refresh.mintlify.site/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](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltPersistentCommentModeWireframe

<img src="https://mintcdn.com/velt-codex-ui-customization-guide-refresh/6EBCqb5VmCp5KMw5/images/customization/comments/persistent-banner/persistent-banner-overview.png?fit=max&auto=format&n=6EBCqb5VmCp5KMw5&q=85&s=2556cabcae8fbba6168ca8039be606ff" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe>
            <VeltPersistentCommentModeWireframe.CloseButton />
            <VeltPersistentCommentModeWireframe.Label />
        </VeltPersistentCommentModeWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## CloseButton

<img src="https://mintcdn.com/velt-codex-ui-customization-guide-refresh/6EBCqb5VmCp5KMw5/images/customization/comments/persistent-banner/persistent-banner-close.png?fit=max&auto=format&n=6EBCqb5VmCp5KMw5&q=85&s=60bf7bc8790547ab4811a9d66a4b02f8" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-close.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.CloseButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Label

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.Label>
            <VeltPersistentCommentModeWireframe.Label.Public />
            <VeltPersistentCommentModeWireframe.Label.Private />
        </VeltPersistentCommentModeWireframe.Label>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### Label.Public

<img src="https://mintcdn.com/velt-codex-ui-customization-guide-refresh/6EBCqb5VmCp5KMw5/images/customization/comments/persistent-banner/persistent-banner-label-public.png?fit=max&auto=format&n=6EBCqb5VmCp5KMw5&q=85&s=0459cab89545f9e3b6e3bcfc664b5def" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-label-public.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.Label.Public />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### Label.Private

<img src="https://mintcdn.com/velt-codex-ui-customization-guide-refresh/6EBCqb5VmCp5KMw5/images/customization/comments/persistent-banner/persistent-banner-label-private.png?fit=max&auto=format&n=6EBCqb5VmCp5KMw5&q=85&s=38add2c3dc66349cbfbb2c03bcf3078f" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-label-private.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.Label.Private />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltComments persistentCommentShadowDom={false}/>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments persistent-comment-shadow-dom="false"></velt-comments>
    ```
  </Tab>
</Tabs>
