eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Working Examples
  • Terminology
  • Best Practices
  • Interaction Design
  • Developer Guide
  1. Messaging

Confirm Dialog

A lightbox dialog that prompts user to confirm or cancel an action.

PreviousAlert DialogNextFile Preview Card

Last updated 2 months ago

Introduction

The confirm dialog pattern is a specific type of that gives a user the chance to confirm or cancel an action.

Working Examples

Terminology

Confirm Button: The button that explicitly confirms the action.

Reject Button: The button that explicitly rejects/cancels the action.

Close Button: The button that implicitly rejects/cancels the action. Usually an 'X' in the top corner.

Mask: The semi-opaque layer that sits between the dialog and the main page.

Best Practices

Confirm dialogs are always modal and require a mask.

Avoid opening a confirm dialog on page load.

Confirm dialogs should be opened as a result of a user action or critical system event.

Avoid stacking of confirm dialogs.

Interaction Design

This section provides interaction design for keyboard, screen reader & pointing devices.

Keyboard

Keyboard focus should be placed on the affirmative button (e.g. "Ok", "Yes", "Agree").

The keyboard should be confined to the interactive elements within the dialog (i.e. modal behaviour).

Pressing ESC key must close confirm dialog, acting as a cancel/non-affirmative response.

Activating any button will close the dialog and return focus to the main page.

Screen Reader

Initial screen reader focus will be placed on the affirmative button.

When opened, the screen reader should announce the title of the dialog, its role (dialog) and the label, role and state of the currently focussed element (the affirmative button).

The screen reader should be confined to the elements within the dialog (i.e. modal behaviour).

Pointer

Clicking the mask must close the confirm dialog, acting as a cancel/non-affirmative response.

Developer Guide

The section is not yet available.

The behaviour is similar to the JavaScript method.

Experience the pattern in action on our companion .

Examine the required markup structure on our

View a fully styled example on our .

window.confirm()
eBay MIND Patterns examples website
Bones GitHub project.
eBay Skin website
lightbox dialog
Confirm dialog when deleting an address.