> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/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.