Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/confirm-dialog

DS v2.1

A confirm dialog is a specific type of lightbox-dialog that prompts a user to confirm or reject their action.

The markup requirements are very strictly: a heading, description and two buttons.

<div
  aria-labelledby="confirm-dialog-title"
  aria-modal="true"
  class="confirm-dialog confirm-dialog--mask-fade"
  hidden
  role="dialog"
>
  <div class="confirm-dialog__window confirm-dialog__window--fade">
    <div class="confirm-dialog__header">
      <h2 id="confirm-dialog-title" class="confirm-dialog__title">
        Delete Address?
      </h2>
    </div>
    <div class="confirm-dialog__main">
      <p id="confirm-dialog__description">
        You will permanently lose this address.
      </p>
    </div>
    <div class="confirm-dialog__footer">
      <button class="btn confirm-dialog__reject">Cancel</button>
      <button
        class="btn btn--primary confirm-dialog__confirm"
        aria-describedby="confirm-dialog__description"
      >
        Delete
      </button>
    </div>
  </div>
</div>