Destructive by design

<div class="demo">
  <div class="demo-row">
    <button class="demo-btn" id="simple">Delete an invoice</button>
    <button class="demo-btn" id="typed">Delete the workspace</button>
  </div>
  <p class="demo-out" id="out">Nothing deleted yet</p>
  <p class="demo-hint">Cancel has the focus, so a reflexive Enter is safe. Clicking outside does nothing.</p>
</div>

import { confirmDanger } from 'https://www.devix.pk/cdn/oss/confirm-dialog@1.0.0/index.js';

const out = document.getElementById('out');

document.getElementById('simple').addEventListener('click', async () => {
  const ok = await confirmDanger('Delete invoice #1041?', { description: 'AED 4,200 · sent to Aisha Khan on 2 September.' });
  out.textContent = ok ? 'Invoice deleted' : 'Kept';
});

document.getElementById('typed').addEventListener('click', async () => {
  // The button stays disabled until the words match, letter for letter.
  const ok = await confirmDanger('Delete the workspace?', {
    description: 'Every project, invoice and file in it goes too. This cannot be undone.',
    requireText: 'DELETE',
    confirmText: 'Delete workspace',
  });
  out.textContent = ok ? 'Workspace deleted' : 'Kept';
});

@import url('https://www.devix.pk/cdn/oss/confirm-dialog@1.0.0/confirm-dialog.min.css');