Confirmation Dialog

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

VeltConfirmDialogWireframe

React / Next.js
Other Frameworks

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

<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-preview-wireframe></velt-confirm-dialog-preview-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
Other Frameworks

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

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

Message

React / Next.js
Other Frameworks

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

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

Preview

Renders only when the draftConfirmation popup shows a quoted preview of the unsent draft content. Empty on every other confirm dialog (comment, area, arrow, tag, recorder deletes).

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltConfirmDialogWireframe.Preview />
</VeltWireframe>

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

RejectButton

React / Next.js
Other Frameworks

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

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

ApproveButton

React / Next.js
Other Frameworks

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

<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)
velt-confirm-dialog--draft — added automatically when the draftConfirmation popup shows
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   { /* ... */ }

Concepts

Approaches

Components: Async Collaboration

Components: Realtime Collaboration

Reference

Confirmation Dialog

VeltConfirmDialogWireframe

Title

Message

Preview

RejectButton

ApproveButton

Styling

Disable ShadowDOM

Dark Mode

Type-Scoped CSS Classes

​VeltConfirmDialogWireframe

​Title

​Message

​Preview

​RejectButton

​ApproveButton

​Styling

​Disable ShadowDOM

​Dark Mode

​Type-Scoped CSS Classes

VeltConfirmDialogWireframe

Title

Message

Preview

RejectButton

ApproveButton

Styling

Disable ShadowDOM

Dark Mode

Type-Scoped CSS Classes