Directory

MessageDialog for Vaadin Flow

Message dialog component for Vaadin Flow

View larger

Close

View larger

Close

View larger

Close

View larger

Close

A dialog component providing an easy way to create custom message, confirmation, question dialogs etc. In case the default layout isn't enough, each area of the dialog (header, content, footer) can be fully customized. Uses a CSS property of the Lumo theme, so it might not work correctly with Material.

Sample code

MessageDialog messageDialog =
    new MessageDialog().setTitle("Unsaved changes", VaadinIcon.EDIT.create()).setMessage(
        "Save changes before closing? Closing will cause any unsaved changes to be discarded.");
messageDialog.addButton().text("Discard").icon(VaadinIcon.WARNING).error()
    .onClick(ev -> Notification.show("Discarded.")).closeOnClick();
messageDialog.addButton().text("Save").primary().onClick(ev -> Notification.show("Saved."))
    .closeOnClick();
messageDialog.addButtonToLeft().text("Cancel").tertiary()
    .onClick(ev -> Notification.show("Canceled.")).closeOnClick();
messageDialog.open();

MessageDialog dialog = new MessageDialog();
dialog.setTitle("Error", VaadinIcon.WARNING.create());
dialog.setMessage("Unfortunately, things didn't go as planned.");

dialog.addButtonToLeft().text("Details").title("Tooltip").icon(VaadinIcon.ARROW_DOWN)
    .toggleDetails();
dialog.addButtonToLeft().text("Abort").tertiary().closeOnClick();
dialog.addButton().text("Ignore").error().closeOnClick();
dialog.addButton().text("Retry").icon(VaadinIcon.ROTATE_LEFT).primary().closeOnClick();

TextArea detailsText = new TextArea();
detailsText.setWidthFull();
detailsText.setMaxHeight("15em");
detailsText.setReadOnly(true);
detailsText.setValue(
    "Lengthy, technical error details.\nLengthy, technical error details.\nLengthy, technical error details.\nLengthy, technical error details.");
dialog.getDetails().add(detailsText);

dialog.open();

Links

• Source Code

Compatibility