Modal

Modals are useful for confirmations, forms, or focused tasks. Always provide an accessible close control and trap focus while open.

Example (pattern)

function ConfirmDialog({ open, onClose }) {
  if (!open) return null;

  return (
    <div role="dialog" aria-modal="true" className="modal">
      <div className="modal-content">
        <h3>Confirm action</h3>
        <p>Are you sure you want to continue?</p>
        <div>
          <button onClick={onClose}>Cancel</button>
          <button className="btn btn-danger">Confirm</button>
        </div>
      </div>
    </div>
  );
}

Notes

Trap keyboard focus inside the dialog and return focus to the triggering element on close.
Allow dismissal with ESC and by clicking the overlay only when appropriate.

Modal / Dialog

On this page