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.
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.
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.
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
Dulaj dilshan
