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

# Confirmation Dialog

> The Confirmation Dialog that appears when you delete a comment annotation.

<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-raghul-agent-docs/vHdpvC1890cm-3bX/images/customization/comments/confirmation-dialog/confirm-dialog-overview.png?fit=max&auto=format&n=vHdpvC1890cm-3bX&q=85&s=66db7e04840c184d6f8c58b1b48e08b8" 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-raghul-agent-docs/vHdpvC1890cm-3bX/images/customization/comments/confirmation-dialog/confirm-dialog-title.png?fit=max&auto=format&n=vHdpvC1890cm-3bX&q=85&s=548830b3ce072a0f20bf98364a8fa25a" 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-raghul-agent-docs/vHdpvC1890cm-3bX/images/customization/comments/confirmation-dialog/confirm-dialog-message.png?fit=max&auto=format&n=vHdpvC1890cm-3bX&q=85&s=1962f67cc1c9ba021dde750e6970104f" 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-raghul-agent-docs/vHdpvC1890cm-3bX/images/customization/comments/confirmation-dialog/confirm-dialog-reject.png?fit=max&auto=format&n=vHdpvC1890cm-3bX&q=85&s=1a82aa9decd34fe2ed1c5af6dbaf1ebe" 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-raghul-agent-docs/vHdpvC1890cm-3bX/images/customization/comments/confirmation-dialog/confirm-dialog-approve.png?fit=max&auto=format&n=vHdpvC1890cm-3bX&q=85&s=83980b159dac1fd765ebbc9dcaea0a09" 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   { /* ... */ }
```