Confirmation Dialog

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

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltConfirmDialogWireframe

React / Next.js

<VeltWireframe>
    <VeltConfirmDialogWireframe>
        <VeltConfirmDialogWireframe.Title />
        <VeltConfirmDialogWireframe.Message />
        <VeltConfirmDialogWireframe.RejectButton />
        <VeltConfirmDialogWireframe.ApproveButton />
    </VeltConfirmDialogWireframe>
</VeltWireframe>

Other Frameworks

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

Title

React / Next.js

<VeltWireframe>
    <VeltConfirmDialogWireframe.Title />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-confirm-dialog-title-wireframe></velt-confirm-dialog-title-wireframe>
</velt-wireframe>

Message

React / Next.js

<VeltWireframe>
    <VeltConfirmDialogWireframe.Message />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-confirm-dialog-message-wireframe></velt-confirm-dialog-message-wireframe>
</velt-wireframe>

RejectButton

React / Next.js

<VeltWireframe>
    <VeltConfirmDialogWireframe.RejectButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-confirm-dialog-reject-button-wireframe></velt-confirm-dialog-reject-button-wireframe>
</velt-wireframe>

ApproveButton

React / Next.js

<VeltWireframe>
    <VeltConfirmDialogWireframe.ApproveButton />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-confirm-dialog-approve-button-wireframe></velt-confirm-dialog-approve-button-wireframe>
</velt-wireframe>

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):

• 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

/* Style the delete-comment confirmation differently from delete-reply */
.velt-confirm-dialog--comment { /* ... */ }
.velt-confirm-dialog--reply   { /* ... */ }