Interaction and Overlays

This section documents the current Vaadin release line — Vaadin 24 LTS / 25.x, Java 17+, Spring Boot 3 / Jakarta EE 10 — as published at the official Vaadin documentation, which is the reference these pages are written and verified against. No specific patch version is pinned. Flow (server-side Java) is the authoring style used throughout, with Hilla / React shown where it differs; Vaadin 7 and the pre-Flow architecture appear only as migration contrast.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Vaadin ships major releases roughly twice a year and its ecosystem iterates.

This section’s bibliography lists the reference material consulted while preparing these pages.

Beyond input fields and the Grid, an application UI is buttons, menus, transient messages and pop-ups. This page follows the individual component pages under Components, starting with Button. Every component here is Flow Java; overlays render into a top-level layer, not inside their parent’s DOM.

Buttons and shortcuts

Button save = new Button("Save", VaadinIcon.CHECK.create(), e -> save());
save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
save.setDisableOnClick(true);                 // guards against double-submit

// a keyboard shortcut bound to the click
save.addClickShortcut(Key.KEY_S, KeyModifier.CONTROL);

// a shortcut not tied to a component
Shortcuts.addShortcutListener(this, this::openSearch, Key.KEY_K, KeyModifier.META);

An Anchor is a real link — use it for downloads and external URLs; use RouterLink (see Routing and Navigation) for in-app navigation. See Keyboard shortcuts.

Menus

MenuBar is a horizontal bar of buttons with drop-down sub-menus; ContextMenu attaches a menu to any component, opened on right-click (or left-click if you set setOpenOnClick(true)). GridContextMenu<T> is the row-aware variant.

MenuBar bar = new MenuBar();
MenuItem file = bar.addItem("File");
SubMenu fileMenu = file.getSubMenu();
fileMenu.addItem("New", e -> newDocument());
fileMenu.addItem("Open…", e -> openDialog());

ContextMenu ctx = new ContextMenu(grid);
ctx.addItem("Refresh", e -> reload());

See Menu Bar and Context Menu.

Transient messages

A Notification is a self-dismissing toast; a Dialog is a modal (or modeless) window you build from components; ConfirmDialog is a ready-made yes/no prompt.

Notification.show("Saved", 3000, Notification.Position.BOTTOM_START);

Dialog dialog = new Dialog();
dialog.setHeaderTitle("Edit customer");
dialog.add(form);
dialog.getFooter().add(new Button("Cancel", e -> dialog.close()), saveButton);
dialog.open();

ConfirmDialog confirm = new ConfirmDialog(
        "Delete customer?", "This cannot be undone.",
        "Delete", e -> delete(),
        "Cancel", e -> {});
confirm.setConfirmButtonTheme("error primary");
confirm.open();

ConfirmDialog is part of the commercial component set — see UI Component Libraries. See Dialog and Confirm Dialog.

Popover is a lightweight, non-modal overlay anchored to a target — for menus, forms or help content. Tooltip shows a short string on hover or focus and is configured through setTooltipText(…) on any component.

Button info = new Button(VaadinIcon.INFO.create());
Popover popover = new Popover();
popover.setTarget(info);
popover.setPosition(PopoverPosition.BOTTOM);
popover.add(new Paragraph("Detailed explanation…"));

save.setTooltipText("Persist your changes (Ctrl+S)");

See Popover and Tooltip.

Grouping content

Component Use

Component	Use
`Tabs` / `TabSheet`	A row of tabs; `TabSheet` also owns and swaps the content per tab.
`Accordion`	Vertically stacked panels, one open at a time.
`Details`	A single collapsible panel (a summary plus content).
`SideNav`	A hierarchical navigation list, usually in an `AppLayout` drawer.

Tabs / TabSheet

A row of tabs; TabSheet also owns and swaps the content per tab.

Accordion

Vertically stacked panels, one open at a time.

Details

A single collapsible panel (a summary plus content).

SideNav

A hierarchical navigation list, usually in an AppLayout drawer.

TabSheet tabs = new TabSheet();
tabs.add("Summary", new SummaryView());
tabs.add("History", new HistoryView());

Accordion accordion = new Accordion();
accordion.add("Shipping address", shippingForm);
accordion.add("Billing address", billingForm);

Avatar, Badge (a Span with theme="badge"), and ProgressBar round out the status indicators:

ProgressBar bar = new ProgressBar(0, 100, 0);
bar.setValue(progress);

Span status = new Span("Active");
status.getElement().getThemeList().add("badge success");

Drag and drop

Mark a source draggable and a target as a drop zone; the drop event carries the dragged component or, for a GridDropTarget, the row it landed on.

DragSource<Card> source = DragSource.create(card);
source.setDraggable(true);
source.setEffectAllowed(EffectAllowed.MOVE);

DropTarget<VerticalLayout> target = DropTarget.create(column);
target.addDropListener(e -> e.getDragSourceComponent()
        .ifPresent(dragged -> column.add(dragged)));

GridDropTarget<Person> gridDrop = new GridDropTarget<>(grid, DropMode.BETWEEN);
gridDrop.addGridDropListener(e -> reorder(e.getDropTargetItem().orElse(null)));

See Drag and drop.