Practice Now
Dialog Creation
User Interface
Programming
Software Development
Coding Tips

How to create a dialog with “Ok” and “Cancel” options

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

A dialog with Ok and Cancel buttons is a confirmation pattern: the user can either accept an action or back out safely. The implementation details depend on the platform, but the design goal is always the same: present a clear decision, return a boolean-like result, and keep the rest of the code simple.

The Simplest Browser Option

In plain browser JavaScript, the built-in confirm() function is the fastest solution.

html
1<!DOCTYPE html>
2<html>
3  <body>
4    <button id="deleteBtn">Delete</button>
5
6    <script>
7      document.getElementById("deleteBtn").addEventListener("click", () => {
8        const confirmed = confirm("Delete this record?");
9        if (confirmed) {
10          console.log("User chose Ok");
11        } else {
12          console.log("User chose Cancel");
13        }
14      });
15    </script>
16  </body>
17</html>

This is useful for quick tools and administrative pages. The downside is that browser dialogs are blocking, not styleable, and visually inconsistent with custom application UI.

A Better Web Pattern: Custom Modal

For production web applications, a custom modal is usually better because it gives you control over styling, accessibility, and button text.

html
1<!DOCTYPE html>
2<html>
3  <body>
4    <button id="openDialog">Archive Item</button>
5
6    <dialog id="confirmDialog">
7      <p>Archive this item?</p>
8      <button id="okBtn">Ok</button>
9      <button id="cancelBtn">Cancel</button>
10    </dialog>
11
12    <script>
13      const dialog = document.getElementById("confirmDialog");
14
15      document.getElementById("openDialog").addEventListener("click", () => {
16        dialog.showModal();
17      });
18
19      document.getElementById("okBtn").addEventListener("click", () => {
20        console.log("confirmed");
21        dialog.close();
22      });
23
24      document.getElementById("cancelBtn").addEventListener("click", () => {
25        console.log("cancelled");
26        dialog.close();
27      });
28    </script>
29  </body>
30</html>

This approach keeps the confirmation logic explicit while letting you design the dialog to match the application.

Desktop Example With Tkinter

If you are building a Python desktop tool, Tkinter already includes a confirmation helper.

python
1import tkinter as tk
2from tkinter import messagebox
3
4
5def confirm_delete():
6    result = messagebox.askokcancel("Confirm", "Delete this file?")
7    if result:
8        print("User clicked Ok")
9    else:
10        print("User clicked Cancel")
11
12
13root = tk.Tk()
14root.title("Dialog Example")
15button = tk.Button(root, text="Delete", command=confirm_delete)
16button.pack(padx=20, pady=20)
17root.mainloop()

This is the same logical pattern as the browser version: open a modal prompt, branch on the returned result, then continue.

Design Rules That Matter More Than The API

No matter which toolkit you use, the dialog should answer three questions clearly:

  • what action is being confirmed
  • what happens if the user accepts
  • what happens if the user cancels

If the action is destructive, the dialog text should say so directly. A vague message such as Proceed? forces the user to remember context that should already be in the dialog itself.

It is also good practice to make Cancel the safe default in keyboard-driven UIs, especially when the action cannot be undone.

Returning The Result Cleanly

The best dialog code keeps the result handling narrow. The dialog should return a clear yes-or-no value, and the caller should decide what to do next.

That means avoiding designs where the dialog itself directly performs all business logic. A cleaner pattern is:

  1. show dialog
  2. get confirmation result
  3. execute the action in the caller if confirmed

This separation keeps the UI reusable and easier to test.

Common Pitfalls

A common mistake is using Ok and Cancel labels without enough context in the message text. Users should not have to infer what Ok means.

Another issue is putting destructive behavior on the wrong default button. If pressing Enter immediately confirms deletion, users can make accidental changes more easily.

Developers also sometimes mix dialog rendering and business logic too tightly. That makes the UI component harder to reuse and harder to test.

Finally, built-in dialogs are convenient but limited. If you need branding, keyboard focus control, screen-reader support, or richer content, move to a custom modal instead of trying to force the built-in API past its limits.

Summary

  • A confirmation dialog with Ok and Cancel should return a simple accept-or-decline result.
  • Browser JavaScript offers confirm() for quick use cases.
  • Production web apps usually prefer a custom modal for control and accessibility.
  • Desktop toolkits such as Tkinter provide built-in confirmation dialogs as well.
  • Clear wording and a safe cancel path matter more than the specific UI library.
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions
Codemia
© 2026 Codemia
Resources
Legal
Social
All Rights Reserved.