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 <dialog> element right after the button:

<dialog closedby="any">
  <h4>Really delete?</h4>

  <p>Are you sure you want to delete post ""? This cannot be undone.</p>

  <button type="button" data-action="dialog#close">Cancel</button>
  <%= button_to "Delete", post_path(@post), method: :delete, data: { turbo_confirm: false } %>
</dialog>

• 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. ✨