Confirm Delete Dialog

Dark Bootstrap 6 Dialog that confirms deleting a file, with danger theme, focus on Cancel, per-row triggers, a loading state, row removal and an Undo toast.

Also known as: delete confirmation modal, confirm delete popup, are you sure dialog, destructive action confirmation

Bootstrap 6 Modals Responsive Dark #confirmation #dark #delete #dialog #modal

Confirm Delete Dialog live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A dark Bootstrap 6 confirmation dialog for destructive actions, shown here deleting files from a shared documents list. The dialog uses the danger theme. It names the exact file, offers a "delete previous versions" option and moves focus to Cancel, so a stray Enter never deletes anything. After a confirmed delete the row fades out and a Bootstrap 6 Toast offers Undo.

How it works

Each .cdd-row has an icon-only .cdd-trigger button with data-bs-toggle="dialog", data-bs-target="#cdd-dialog" and a data-cdd-name attribute. One <dialog class="dialog theme-danger cdd-dialog" role="alertdialog"> serves every row. In show.bs.dialog, event.relatedTarget is the clicked button. The script reads its data-cdd-name into .cdd-target and remembers the row. The same event schedules cancel.focus() right after the native showModal() call, so the safe action is focused first.

theme-danger on the dialog colors the solid Delete button through inherited --bs-theme-* variables. The checkbox wrapper uses .theme-reset, because in alpha.1 a themed .check fills its unchecked box with the theme color.

Clicking .cdd-confirm disables both buttons and shows a .spinner-border.spinner-sm. A hide.bs.dialog listener keeps the dialog open while busy. When the simulated request finishes, the dialog closes. After hidden.bs.dialog, the row gets .cdd-row--leaving, is removed, .cdd-count updates, and focus moves to the next row's delete button or the list heading. Toast.getOrCreateInstance(...).show() then shows the message. .cdd-undo puts the row back in its old position.

For the demo, the closed dialog is also shown inline with .cdd-preview. Opening it from a row or pressing Cancel ends the preview.

Customization

Remove cdd-preview from the <dialog> for production, so it only appears when a delete button is pressed.
--cdd-danger on .cdd-root: changes the alert icon, the dialog glow and the checked checkbox.
--cdd-surface, --cdd-bg and --cdd-line on .cdd-root: adjust the panel, page and divider colors.
--bs-dialog-width on .cdd-dialog: makes the confirmation wider or narrower (420px by default).
data-cdd-name on each .cdd-trigger: sets the name shown in the dialog title and toast.
Replace the setTimeout in the .cdd-confirm click handler with a fetch() DELETE request. Keep removeRow() for the success path.
Add data-bs-backdrop="static" to the triggers so clicks outside do not dismiss the dialog.

Use cases

File managers: one dialog serves every row and names the exact file being deleted
Document lists: after deleting, an Undo toast puts the row back in its old position
Admin tools: focus starts on Cancel so a stray Enter never deletes anything
Cloud storage apps: a checkbox offers to delete previous versions as well

Accessibility

The dialog uses role="alertdialog" and is labelled by #cdd-title and described by #cdd-desc. Focus starts on Cancel, Escape and the backdrop close it, and focus returns to the trigger, or to the next row after a delete. Each icon button's aria-label includes the file name. The toast is a polite status message, and the row fade is disabled under prefers-reduced-motion.

Bootstrap 6 notes

Bootstrap 5's .modal with data-bs-dismiss="modal" becomes a native <dialog class="dialog"> with data-bs-dismiss="dialog". btn-danger is now btn-solid theme-danger, and icon buttons use btn-icon btn-text. Checkboxes are a plain .check inside .form-field. Built on Bootstrap 6.0.0-alpha.1, so APIs may still change. Icons come from Bootstrap Icons.

Confirm Delete Dialog at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile, dark design
Category: Modals
License: Free for personal and commercial use

Questions about this template

Can I use the Confirm Delete Dialog code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.