Notification

add(createButton(Position.TOP_STRETCH),
        createButton(Position.TOP_START),
        createButton(Position.TOP_CENTER),
        createButton(Position.TOP_END), createButton(Position.MIDDLE),
        createButton(Position.BOTTOM_START),
        createButton(Position.BOTTOM_CENTER),
        createButton(Position.BOTTOM_END),
        createButton(Position.BOTTOM_STRETCH));

...

private Button createButton(Notification.Position position) {
    Button button = new Button(position.getClientName());
    button.addClickListener(event -> show(position));
    return button;
}

...

private void show(Notification.Position position) {
    Notification.show(position.getClientName(), 5000, position);
}

Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.LUMO_ERROR);

// this is the default, 0 or negative means the Notification
// is not closed automatically
notification.setDuration(0);

// Now we can compose the content from components
Button retryButton = new RetryButton();
Button closeButton = new CloseButton();

var layout = new HorizontalLayout(new Text("Failed to generate report"),
        retryButton, closeButton);
notification.add(layout);

notification.open();

Notification notification = new Notification();
notification.setDuration(10000);
notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);

Button undoButton = new UndoButton();
undoButton.addClickListener(event -> {
    // In this example we just close the Notification
    notification.close();
});

var layout = new HorizontalLayout(new Text("5 tasks deleted"),
        undoButton, new CloseButton());
layout.setAlignItems(Alignment.CENTER);
notification.add(layout);

notification.open();

// When creating a notification using the constructor,
// the duration is 0-sec by default which means that
// the notification does not close automatically.
Notification notification = new Notification();

Div text = new Div(new Text("Jason Bailey mentioned you in "),
        new Anchor("#", "Project Q4"));

Button closeButton = new Button(new Icon("lumo", "cross"));
closeButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
closeButton.setAriaLabel("Close");
closeButton.addClickListener(event -> {
    notification.close();
});

HorizontalLayout layout = new HorizontalLayout(text, closeButton);
layout.setAlignItems(Alignment.CENTER);

notification.add(layout);
notification.open();

public static Notification createSubmitSuccess() {
    Notification notification = new Notification();
    notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);

    Icon icon = VaadinIcon.CHECK_CIRCLE.create();

    Button viewBtn = new Button("View", clickEvent -> notification.close());
    viewBtn.getStyle().setMargin("0 0 0 var(--lumo-space-l)");

    var layout = new HorizontalLayout(icon,
            new Text("Application submitted!"), viewBtn,
            createCloseBtn(notification));
    layout.setAlignItems(FlexComponent.Alignment.CENTER);

    notification.add(layout);

    return notification;
}

public static Notification createReportError() {
    Notification notification = new Notification();
    notification.addThemeVariants(NotificationVariant.LUMO_ERROR);

    Icon icon = VaadinIcon.WARNING.create();
    Button retryBtn = new Button("Retry",
            clickEvent -> notification.close());
    retryBtn.getStyle().setMargin("0 0 0 var(--lumo-space-l)");

    var layout = new HorizontalLayout(icon,
            new Text("Failed to generate report!"), retryBtn,
            createCloseBtn(notification));
    layout.setAlignItems(FlexComponent.Alignment.CENTER);

    notification.add(layout);

    return notification;
}

public static Notification createMentionNotification() {
    Notification notification = new Notification();

    Avatar avatar = new Avatar("Jason Bailey");

    Span name = new Span("Jason Bailey");
    name.getStyle().set("font-weight", "500");

    Div info = new Div(name, new Text(" mentioned you in "),
            new Anchor("#", "Project Q4"));

    HorizontalLayout layout = new HorizontalLayout(avatar, info,
            createCloseBtn(notification));
    layout.setAlignItems(FlexComponent.Alignment.CENTER);

    notification.add(layout);

    return notification;
}

public static Notification createUploadSuccess() {
    Notification notification = new Notification();

    Icon icon = VaadinIcon.CHECK_CIRCLE.create();
    icon.setColor("var(--lumo-success-color)");

    Div uploadSuccessful = new Div(new Text("Upload successful"));
    uploadSuccessful.getStyle().set("font-weight", "600")
            .setColor("var(--lumo-success-text-color)");

    Span fileName = new Span("Financials.xlsx");
    fileName.getStyle().set("font-size", "var(--lumo-font-size-s)")
            .set("font-weight", "600");

    Div info = new Div(uploadSuccessful,
            new Div(fileName, new Text(" is now available in "),
                    new Anchor("#", "Documents")));

    info.getStyle().set("font-size", "var(--lumo-font-size-s)")
            .setColor("var(--lumo-secondary-text-color)");

    var layout = new HorizontalLayout(icon, info,
            createCloseBtn(notification));
    layout.setAlignItems(FlexComponent.Alignment.CENTER);

    notification.add(layout);

    return notification;
}

public static Button createCloseBtn(Notification notification) {
    Button closeBtn = new Button(VaadinIcon.CLOSE_SMALL.create(),
            clickEvent -> notification.close());
    closeBtn.addThemeVariants(LUMO_TERTIARY_INLINE);

    return closeBtn;
}

// Show a simple text-based notification
Notification notification = Notification
        .show("Financial report generated");
notification.setPosition(Notification.Position.MIDDLE);