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

# Confirmation Dialog

> Customize the Velt Confirmation Dialog that appears when deleting a comment annotation — override the title, message, and action buttons with your own UI.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltConfirmDialogWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/confirmation-dialog/confirm-dialog-overview.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=d271ab7577a99c801029420f749efe82" alt="" width="1280" height="640" data-path="images/customization/comments/confirmation-dialog/confirm-dialog-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltConfirmDialogWireframe>
            <VeltConfirmDialogWireframe.Title />
            <VeltConfirmDialogWireframe.Message />
            <VeltConfirmDialogWireframe.RejectButton />
            <VeltConfirmDialogWireframe.ApproveButton />
        </VeltConfirmDialogWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-confirm-dialog-wireframe>
            <velt-confirm-dialog-title-wireframe></velt-confirm-dialog-title-wireframe>
            <velt-confirm-dialog-message-wireframe></velt-confirm-dialog-message-wireframe>
            <velt-confirm-dialog-reject-button-wireframe></velt-confirm-dialog-reject-button-wireframe>
            <velt-confirm-dialog-approve-button-wireframe></velt-confirm-dialog-approve-button-wireframe>
        </velt-confirm-dialog-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Title

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/confirmation-dialog/confirm-dialog-title.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=986ecd1212b1447972501c9110a9de67" alt="" width="1280" height="640" data-path="images/customization/comments/confirmation-dialog/confirm-dialog-title.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-confirm-dialog-title-wireframe></velt-confirm-dialog-title-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Message

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/confirmation-dialog/confirm-dialog-message.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=4176a28e62624d3637a2db7a558ce8e1" alt="" width="1280" height="640" data-path="images/customization/comments/confirmation-dialog/confirm-dialog-message.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-confirm-dialog-message-wireframe></velt-confirm-dialog-message-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## RejectButton

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/confirmation-dialog/confirm-dialog-reject.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=a98744a5013e12d9bc0c040737bfc038" alt="" width="1280" height="640" data-path="images/customization/comments/confirmation-dialog/confirm-dialog-reject.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-confirm-dialog-reject-button-wireframe></velt-confirm-dialog-reject-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## ApproveButton

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/confirmation-dialog/confirm-dialog-approve.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=a9f8801ea75b62ac1323990a17aa401f" alt="" width="1280" height="640" data-path="images/customization/comments/confirmation-dialog/confirm-dialog-approve.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-confirm-dialog-approve-button-wireframe></velt-confirm-dialog-approve-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Styling

### Disable ShadowDOM

ShadowDOM is not used in this component. You can apply your styling directly to the component.

### Dark Mode

This component takes the dark mode property from the parent feature (eg: comments) where this used.
If the parent feature component is in dark mode, this component will also be in dark mode.

### Type-Scoped CSS Classes

When the confirm dialog is shown, a modifier class is added to the root element based on the `type` prop (see [`ConfirmDialogComponentConfig`](/api-reference/sdk/models/data-models#confirmdialogcomponentconfig)):

* `velt-confirm-dialog` — always present (base class)
* `velt-confirm-dialog--comment` — added automatically when deleting a comment
* `velt-confirm-dialog--reply` — added automatically when deleting a reply
* `velt-confirm-dialog--{type}` — general form for any custom `type` string (e.g., `archive`, `mention`)
* No modifier class is added when `type` is omitted or empty

```css theme={null}
/* Style the delete-comment confirmation differently from delete-reply */
.velt-confirm-dialog--comment { /* ... */ }
.velt-confirm-dialog--reply   { /* ... */ }
```