ConfirmationDialog

About

ConfirmationDialog adds a polished and reliable way to handle critical user decisions in your Framer projects. Whether you're preventing accidental deletions or confirming a form submission, this component lets you pause the user journey with a clear, stylish modal. Just drop it into your design to ensure your visitors feel confident before taking an action that can't be undone.

What it does

It displays a centered overlay with a custom title and message body. The component supports three distinct visual styles Danger, Warning, and Info so the urgency always matches the context. It handles the logic for both "Confirm" and "Cancel" paths, allowing you to link the confirmation button to any URL or internal page while giving users an easy way to back out if they change their minds.

What you can customize

Content & Context: You can toggle the dialog visibility, write your own headers, and add detailed descriptions in the message area. Use the variant picker to switch between different color schemes based on how critical the action is.

Buttons & Links: Customize the labels for both buttons and assign a specific link to the confirmation action. You can also fine-tune the look of each button by choosing unique icons and adjusting the corner radius to match your brand's aesthetic.

Interactions: Connect a trigger event to launch the dialog, making it feel like a seamless part of your site's navigation.

Great for

• Deleting items or destructive account changes

• Finalizing purchases or form submissions

• Warning users before they navigate away from unsaved work

• Important announcements or "Read Before Proceeding" notices

• Adding a professional layer of friction to sensitive interactions

Share your buildIf you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help?Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb