This article was originally published on Rails Designer Blog
Rails, when using turbo(-links), has long shipped with a built-in confirmation dialog for destructive actions. You’ve probably used it countless times:
<%= button_to "Delete",
post_path(post),
method: :delete,
data: { turbo_confirm: "Really delete this post?" }
%>
It works. It’s simple. But it’s also… well, a bit boring. The browser’s native confirm dialog is functional but not exactly pretty. And customizing it? Not really an option.
The default turbo_confirm uses the browser’s built-in confirmation dialog. It gets the job done, but you have no control over how it looks or what content it displays. Want to add formatting? Can’t do it. Want to match your app’s design? Nope. Want to include additional context or warnings? Not happening.
Though Turbo actually provides a way to override the confirmation UI, and if you’re using Rails Designer’s UI components, you even get a few styled options out of the box.
But today I want to explore another approach that gives you more flexibility. This is how it will look:
As always, the code can be found this repo
Let’s start by removing the turbo_confirm data attribute from your button. Change this:
<%= button_to "Delete",
post_path(post),
method: :delete,
data: { turbo_confirm: "Really delete this post?" }
%>
To this:
<%%== tag.button "Delete", type: "button", data: { action: "dialog#openModal", target: "##{dom_id(post, :dialog)}"} %>
Notice it is now using tag.button instead of button_to. The data-action tells Attractive.js (more on this later) to open a dialog. The data-target points to which dialog to open using the post’s unique ID.
Right after your button, add the actual dialog:
<%= tag.dialog class: "dialog", id: dom_id(post, :dialog), closedby: "any" do %>
Really delete?
Are you sure you want to delete post "<%= tag.b post.name %>"? This cannot be undone.
class="buttons">
<%= button_to "Delete", post_path(post), method: :delete %>
