More from Henry Kim

RSS

Custom confirm dialog with Stimulus (better than window.confirm)

4697 views

0 comments

                  <%= link_to 'Delete', task_path(task),
      data: { controller: 'confirm', action: 'confirm#ask', confirm_message_value: 'Delete this task permanently?', turbo_method: :delete },
      class: 'text-red-700' %>

                  import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { message: String }

  ask(event) {
    event.preventDefault()
    if (window.confirm(this.messageValue)) {
      this.element.removeAttribute("data-action")
      this.element.click()
    }
  }
}

data-turbo-confirm uses the browser confirm dialog, which is functional but not pretty. For a more polished app, I replace it with a Stimulus controller that intercepts clicks, shows a custom modal, and only proceeds if the user confirms. Turbo makes this easy because links/buttons remain normal; you’re just gating the interaction. I keep the controller generic: it reads the message from a data attribute and uses a single global modal element. If the user confirms, I trigger the original click programmatically or submit the associated form. This approach gives better UX and allows richer copy (“This can’t be undone”). It’s still accessible if you implement focus trap and keyboard actions. I reach for this pattern sparingly—only for truly destructive actions.

Henry Kim

More from Henry Kim

Custom confirm dialog with Stimulus (better than window.confirm)

0 Comments

More from Henry Kim