Replace Turbo confirm with native dialog

Source: Dev.to

Rails, when using turbo‑links, ships with a built‑in confirmation dialog for destructive actions. You’ve probably used it countless times:

The default turbo_confirm uses the browser’s native confirm dialog. It works, but you have no control over its appearance or content.

---

Replacing turbo_confirm with a native dialog

Below is a minimal approach that gives you full control over the markup and styling.

1. Remove the turbo_confirm attribute

Replace the original button with a plain button that triggers a Stimulus‑style action:

2. Add the dialog markup

Place a “ element right after the button:

  
#### Really delete?

  
Are you sure you want to delete post ""? This cannot be undone.

  
    
  

• closedby="any" lets the user close the dialog by clicking outside it or pressing Esc.
• The inner button_to performs the actual deletion.

3. Include Attractive.js

Add Attractive.js to your layout (e.g., app/views/layouts/application.html.erb):

The library provides the dialog#openModal action, so no custom JavaScript is required. See the docs for more details.

4. Style the dialog

You can style the dialog however you like. The repository includes a basic styling example: . For advanced CSS techniques, refer to the article on modern CSS: .

---

When to use which approach?

The custom dialog remains simple—no extra JavaScript—and gives you complete control over the user experience. ✨