Confirm Dialog

Note
Commercial feature

A commercial Vaadin subscriptions is required to use Confirm Dialog in your project.

Confirm Dialog is a modal Dialog used to confirm user actions.

Open in a
new tab
import { css, html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/notification';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';

export class Example extends LitElement {
  static get styles() {
    return css`
      :host {
        display: flex !important;
        justify-content: center;
        background-color: var(--lumo-shade-20pct);
        padding: var(--lumo-space-l);
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
      }

      .overlay {
        display: flex;
        justify-content: center;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        background-color: var(--lumo-base-color);
        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
        border-radius: var(--lumo-border-radius-m);
        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
        color: var(--lumo-body-text-color);
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-m);
        font-weight: 400;
        line-height: var(--lumo-line-height-m);
        letter-spacing: 0;
        text-transform: none;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
      }

      .content {
        padding: var(--lumo-space-l);
        max-width: 400px;
      }

      #footer {
        margin: calc(var(--lumo-space-l) * -1);
        margin-top: var(--lumo-space-l);
        padding: 0 var(--lumo-space-m);
        background-color: var(--lumo-contrast-5pct);
      }

      #footer vaadin-button {
        margin: calc(var(--lumo-space-xs) * 3) 0;
      }

      #footer vaadin-button[theme~='error'] {
        margin-right: calc(var(--lumo-space-xs) * 3);
      }
    `;
  }
  render() {
    return html`
      <div class="overlay">
        <div class="content">
          <vaadin-vertical-layout theme="spacing" style="align-items: stretch;">
            <h3 style="margin: var(--lumo-space-l) 0 0 0;">Unsaved changes</h3>
            <p style="margin-bottom: 0;">
              There are unsaved changes. Do you want to discard or save them?
            </p>
            <vaadin-horizontal-layout id="footer">
              <vaadin-button theme="tertiary">Cancel</vaadin-button>
              <div style="flex-grow: 1;"></div>
              <vaadin-button theme="error tertiary">Discard</vaadin-button>
              <vaadin-button theme="primary">Save</vaadin-button>
            </vaadin-horizontal-layout>
          </vaadin-vertical-layout>
        </div>
      </div>
    `;
  }
}
Open in a
new tab
<vaadin-confirm-dialog
  header="Unsaved changes"
  cancel
  @cancel="${() => (this.status = 'Canceled')}"
  reject
  reject-text="Discard"
  @reject="${() => (this.status = 'Discarded')}"
  confirm-text="Save"
  @confirm="${() => (this.status = 'Saved')}"
  .opened="${this.dialogOpened}"
  @opened-changed="${this.openedChanged}"
>
  There are unsaved changes. Do you want to discard or save them?
</vaadin-confirm-dialog>

Content

Confirm Dialog consists of:

  • Title

  • Message

  • Footer

    • “Cancel” button

    • “Reject” button

    • “Confirm” button

Each Confirm DIalog should have a title and/or message. The “Confirm” button is shown by default, while the two other buttons are not (they must be explicitly enabled to be displayed).

Title

Confirm Dialog’s title should be brief but informative and written in sentence case. It must explain the dialog’s purpose and can be phrased as a statement or question. Avoid ambiguous titles, such as “Are you sure?”. Rich content, such as other components and elements, can also be used in the title.

Messages

Confirm Dialog’s message should contain any information a user might need to make an informed decision.

While it can contain any type of content, Confirm Dialog is not meant for collecting user input, except for a Checkbox used for remembering the user’s choice.

Buttons

Confirm Dialog’s buttons are customizable. You can edit their labels and change their theme variants.

Confirm Button

The “Confirm” button represents Confirm Dialog’s primary action and is the only button that is visible by default. Every Dialog needs at least one button.

As the name suggests, its default label is “Confirm”, but it can and should be relabeled based on the use case.

Usage Recommendations

  • Use concise labels that explain the action, such as “Save” and “Delete”. Avoid ambiguous labels like “Yes” and “No”.

  • For dangerous actions, such as those that lose or destroy data, use the Error theme variant.

  • For simple acknowledgements, it is acceptable to use an “OK” label.

Open in a
new tab
<vaadin-confirm-dialog
  header="Export failed"
  confirm-text="OK"
  @confirm="${() => (this.status = 'Acknowledged')}"
  .opened="${this.dialogOpened}"
  @opened-changed="${this.openedChanged}"
>
  An error occurred while exporting <b>Report Q4</b>. Please try again. If the problem
  persists, please contact <a href="mailto:support@company.com">support@company.com</a>.
</vaadin-confirm-dialog>

Cancel Button

The “Cancel” button is used in situations where the user must be able to cancel an action altogether, such as confirming irreversible actions like saving or deleting data.

Open in a
new tab
<vaadin-confirm-dialog
  header='Delete "Report Q4"?'
  cancel
  @cancel="${() => (this.status = 'Canceled')}"
  confirm-text="Delete"
  confirm-theme="error primary"
  @confirm="${() => (this.status = 'Deleted')}"
  .opened="${this.dialogOpened}"
  @opened-changed="${this.openedChanged}"
>
  Are you sure you want to permanently delete this item?
</vaadin-confirm-dialog>

Reject Button

The “Reject” button differs from the “Cancel” button in that it still moves the user forward in their workflow.

For example, if the user tries to leave a view containing unsaved changes, they are typically presented with three options: “Cancel”, “Discard” and “Save”. “Cancel” allows the user to stay put and review their changes. “Discard” (the “Reject” button in this case) gets rid of the changes and the user leaves the view.

Open in a
new tab
<vaadin-confirm-dialog
  header="Unsaved changes"
  cancel
  @cancel="${() => (this.status = 'Canceled')}"
  reject
  reject-text="Discard"
  @reject="${() => (this.status = 'Discarded')}"
  confirm-text="Save"
  @confirm="${() => (this.status = 'Saved')}"
  .opened="${this.dialogOpened}"
  @opened-changed="${this.openedChanged}"
>
  Do you want to discard or save your changes before navigating away?
</vaadin-confirm-dialog>

Closing

Confirm Dialog can be closed by clicking one of its buttons (all buttons close the dialog by default), or by pressing Esc (which triggers the action associated with the Cancel button if one exists). Closing on Esc can be disabled by setting the noCloseOnEsc property to false.

ComponentUsage Recommendations

Dialog

Component for presenting information and UI elements in an overlay.