Directory

← Back

MessageDialog for Vaadin Flow

Message dialog component for Vaadin Flow

Author

Rating

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();

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Width and height of the icon are no longer overridden.
Released
2021-05-08
Maturity
NOT_MAINTAINED
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Browser
Browser Independent
Online