No Confirmation Box

A modern confirmation dialog package where the No button keeps slipping away so the Yes choice is the only sensible option.

Usage

import { createNoConfirmationBox } from 'no-confirmation-box'
import 'no-confirmation-box/styles.css'

createNoConfirmationBox({
  title: 'Continue?',
  text: 'Do you want to proceed with the next step?',
  icon: '!',
  button1Text: 'No thanks',
  button2Text: 'Continue',
  onYes: () => console.log('Confirmed')
})

React

import { useState } from 'react'
import { NoConfirmationBox } from 'no-confirmation-box/react'
import 'no-confirmation-box/styles.css'

export function DangerousAction() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open dialog
      </button>

      <NoConfirmationBox
        open={open}
        icon="!"
        title="Continue?"
        text="The first button runs away. The second button confirms."
        button1Text="No thanks"
        button2Text="Continue"
        onButton1Attempt={() => console.log('No was attempted')}
        onButton2={() => console.log('Confirmed')}
        onClose={() => setOpen(false)}
      />
    </>
  )
}

For an uncontrolled dialog, render it conditionally and let it close itself:

{showDialog && (
  <NoConfirmationBox
    title="Install update?"
    text="You can configure all content and styling from props."
    button1Text="Skip"
    button2Text="Install"
    onClose={() => setShowDialog(false)}
  />
)}

Configuration

createNoConfirmationBox({
  icon: '!?',
  title: 'Delete everything?',
  text: 'The first button runs away. The second button confirms.',
  button1Text: 'No',
  button2Text: 'Yes',
  closeOnOverlayClick: true,
  className: 'my-confirmation-overlay',
  dialogClassName: 'my-confirmation-dialog',
  styles: {
    overlay: {
      '--ncb-overlay-background': 'rgba(0, 0, 0, 0.7)'
    },
    dialog: {
      maxWidth: '480px'
    },
    icon: {
      background: 'linear-gradient(135deg, #ffbf47, #ff5c7a)'
    },
    button1: {
      background: '#e44'
    },
    button2: {
      background: '#0a7'
    }
  },
  onButton1Attempt: () => console.log('No was attempted'),
  onButton2: ({ destroy }) => console.log('Confirmed')
})

Options:

• title: dialog title text or a DOM node.
• text / message: body text or a DOM node.
• icon: icon text or a DOM node. Use false to hide it.
• button1Text / noLabel: evasive button text.
• button2Text / yesLabel: clickable confirmation button text.
• onButton1Attempt / onNoAttempt: called when the user tries to press the evasive button.
• onButton2 / onYes: called when the confirmation button is clicked.
• closeOnOverlayClick: set to false to prevent closing from the backdrop.
• className, dialogClassName, iconClassName, titleClassName, messageClassName, actionsClassName, button1ClassName, button2ClassName: extra CSS classes.
• style / dialogStyle: inline styles for the dialog.
• overlayStyle, iconStyle, titleStyle, messageStyle, actionsStyle, button1Style, button2Style: inline styles for specific parts.
• styles: grouped style object with overlay, dialog, icon, title, message, actions, button1, and button2 keys.
• container: element to append the dialog into. Defaults to document.body.

React-only options:

• open: controls visibility when provided.
• children: custom body content, used instead of text / message when provided.
• closeOnButton2: defaults to true. Set to false if the parent should close the dialog manually.

Features

• Modern glassy card UI
• No button moves before the pointer can hover or click it
• Yes button stays prominent and clickable
• Configurable icon, title, text, button labels, classes, callbacks, and styles
• Works with plain JavaScript, React, and any module-based app