> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-4.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-v6-0-0-beta-4/haAIsXBqy6YWGU86/images/customization/comments/persistent-banner/persistent-banner-overview.png?fit=max&auto=format&n=haAIsXBqy6YWGU86&q=85&s=b692ea7c280b26ba0c6e0aec1a34bbcc" 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-v6-0-0-beta-4/haAIsXBqy6YWGU86/images/customization/comments/persistent-banner/persistent-banner-close.png?fit=max&auto=format&n=haAIsXBqy6YWGU86&q=85&s=17c672809060c0e952655c763eb73de1" 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-v6-0-0-beta-4/haAIsXBqy6YWGU86/images/customization/comments/persistent-banner/persistent-banner-label-public.png?fit=max&auto=format&n=haAIsXBqy6YWGU86&q=85&s=db875cf0cf911edc3d6c9377d82c3665" 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-v6-0-0-beta-4/haAIsXBqy6YWGU86/images/customization/comments/persistent-banner/persistent-banner-label-private.png?fit=max&auto=format&n=haAIsXBqy6YWGU86&q=85&s=086ceab308f41bbf72c4bfef5053f400" 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>
