Confirm dialog

UI::ConfirmDialog

A styled dialog that answers data-turbo-confirm, in place of the browser's confirm box.

# VelvetKit ## Confirm dialog (`UI::ConfirmDialog`) A styled dialog that answers data-turbo-confirm, in place of the browser's confirm box. Add it: `bin/rails generate velvetkit:add confirm_dialog` Also adds: `icon`, `spinner`, `button` Stimulus: `ui--confirm-dialog` ### Arguments ```ruby UI::ConfirmDialog.new(confirm_label: nil, cancel_label: nil, class: nil, **html_attrs) ``` ### Notes A styled replacement for the browser's confirm() box that Turbo shows for `data-turbo-confirm`. Render one in your layout and every link, form and button_to that already asks for confirmation uses it, with no other change: <%= render(UI::ConfirmDialog.new) %> <%= button_to "Delete", project_path(@project), method: :delete, data: { turbo_confirm: "Delete this project?", confirm_description: "Its pages and files go too. This can't be undone.", confirm_button: "Delete project", confirm_variant: "destructive" } %> The confirm message is the dialog's title. Optional data attributes, on the same element as data-turbo-confirm, fill in the rest: `confirm-description`, `confirm-button` and `confirm-cancel` (the button labels), and `confirm-variant="destructive"` for a red confirm button. It's a native <dialog>: Escape and clicking outside cancel, focus is trapped inside and returns to the trigger, and Cancel has focus when it opens so a stray Enter never confirms. ### Example: Destructive ```erb <%# In your layout, once: render(UI::ConfirmDialog.new) %> <%= render(UI::ButtonTo.new("/demo/projects/1", method: :delete, variant: :destructive, data: { turbo_confirm: "Delete this project?", confirm_description: "Its pages, files and history go too. This can't be undone.", confirm_button: "Delete project", confirm_variant: "destructive" })) do |button| %> <% button.with_leading_icon(name: "trash-2") %>Delete project <% end %> ``` ### Example: With a Description ```erb <%= render(UI::ButtonTo.new("/demo/posts/1/publish", method: :patch, data: { turbo_confirm: "Publish this post?", confirm_description: "Subscribers get an email straight away.", confirm_button: "Publish", confirm_cancel: "Not yet" })) { "Publish" } %> ``` ### Example: On a Link ```erb <%# Turbo turns a data-turbo-method link into a form; the options still apply. %> <%= link_to "Sign out of every device", "/demo/sessions", class: "text-sm font-medium text-primary underline-offset-4 hover:underline", data: { turbo_method: :delete, turbo_confirm: "Sign out everywhere?", confirm_description: "You'll need to sign in again on your phone and laptop.", confirm_button: "Sign out" } %> ``` ### Example: In a Form ```erb <%# On a form, Turbo asks before submitting it. %> <%= form_with url: "/demo/invoices", class: "flex w-full max-w-md flex-col gap-4", data: { turbo_confirm: "Send this invoice to Acme Inc.?", confirm_button: "Send invoice" } do %> <%= render(UI::Input.new(label: "Amount", name: "invoice[amount]", value: "1,200.00")) %> <%= render(UI::Button.new(type: :submit, class: "self-start")) { "Send" } %> <% end %> ``` ### Example: Plain ```erb <%# Only data-turbo-confirm: the message is the title, with the default buttons. %> <%= render(UI::ButtonTo.new("/demo/notifications/read", method: :patch, variant: :outline, data: { turbo_confirm: "Mark every notification as read?" })) { "Mark all as read" } %> ```

bin/rails generate velvetkit:add confirm_dialog

Also adds: Icon Spinner Button
Stimulus: ui--confirm-dialog
Installs: Nothing

Examples

Destructive

destructive.html.erb

<%# In your layout, once: render(UI::ConfirmDialog.new) %>
<%= render(UI::ButtonTo.new("/demo/projects/1", method: :delete, variant: :destructive,
      data: { turbo_confirm: "Delete this project?",
              confirm_description: "Its pages, files and history go too. This can't be undone.",
              confirm_button: "Delete project", confirm_variant: "destructive" })) do |button| %>
  <% button.with_leading_icon(name: "trash-2") %>Delete project
<% end %>

With a Description

with_description.html.erb

<%= render(UI::ButtonTo.new("/demo/posts/1/publish", method: :patch,
      data: { turbo_confirm: "Publish this post?",
              confirm_description: "Subscribers get an email straight away.",
              confirm_button: "Publish", confirm_cancel: "Not yet" })) { "Publish" } %>

On a Link

Sign out of every device

on_link.html.erb

<%# Turbo turns a data-turbo-method link into a form; the options still apply. %>
<%= link_to "Sign out of every device", "/demo/sessions", class: "text-sm font-medium text-primary underline-offset-4 hover:underline",
      data: { turbo_method: :delete, turbo_confirm: "Sign out everywhere?",
              confirm_description: "You'll need to sign in again on your phone and laptop.",
              confirm_button: "Sign out" } %>

In a Form

in_form.html.erb

<%# On a form, Turbo asks before submitting it. %>
<%= form_with url: "/demo/invoices", class: "flex w-full max-w-md flex-col gap-4",
      data: { turbo_confirm: "Send this invoice to Acme Inc.?", confirm_button: "Send invoice" } do %>
  <%= render(UI::Input.new(label: "Amount", name: "invoice[amount]", value: "1,200.00")) %>
  <%= render(UI::Button.new(type: :submit, class: "self-start")) { "Send" } %>
<% end %>

Plain

plain.html.erb

<%# Only data-turbo-confirm: the message is the title, with the default buttons. %>
<%= render(UI::ButtonTo.new("/demo/notifications/read", method: :patch, variant: :outline,
      data: { turbo_confirm: "Mark every notification as read?" })) { "Mark all as read" } %>

API

Arguments

UI::ConfirmDialog.new(confirm_label: nil, cancel_label: nil, class: nil, **html_attrs)

Notes

A styled replacement for the browser's confirm() box that Turbo shows for `data-turbo-confirm`. Render one in your layout and every link, form and button_to that already asks for confirmation uses it, with no other change: <%= render(UI::ConfirmDialog.new) %> <%= button_to "Delete", project_path(@project), method: :delete, data: { turbo_confirm: "Delete this project?", confirm_description: "Its pages and files go too. This can't be undone.", confirm_button: "Delete project", confirm_variant: "destructive" } %> The confirm message is the dialog's title. Optional data attributes, on the same element as data-turbo-confirm, fill in the rest: `confirm-description`, `confirm-button` and `confirm-cancel` (the button labels), and `confirm-variant="destructive"` for a red confirm button. It's a native <dialog>: Escape and clicking outside cancel, focus is trapped inside and returns to the trigger, and Cancel has focus when it opens so a stray Enter never confirms.