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

# 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/2O8vk8YlVD4Kq-ni/images/customization/comments/confirmation-dialog/confirm-dialog-overview.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=261dc5a41b0a418c1ebc252094f091e9" 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/2O8vk8YlVD4Kq-ni/images/customization/comments/confirmation-dialog/confirm-dialog-title.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=3f89bc58a549dc14857857181555c51f" 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/2O8vk8YlVD4Kq-ni/images/customization/comments/confirmation-dialog/confirm-dialog-message.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=ab0ef7b073d0918a30e44183305c1b96" 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/2O8vk8YlVD4Kq-ni/images/customization/comments/confirmation-dialog/confirm-dialog-reject.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=8e4496b75f6b71ad95a3e716a945d8f3" 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/2O8vk8YlVD4Kq-ni/images/customization/comments/confirmation-dialog/confirm-dialog-approve.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=09e890270605f21181f26436a2a7070b" 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   { /* ... */ }
```