Skip to content

docs: update notification examples to support both Lumo and Aura #5228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
web-padawan merged 5 commits into from
Feb 25, 2026
Merged

docs: update notification examples to support both Lumo and Aura #5228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
556b6df
docs: update notification examples to support both Lumo and Aura
web-padawan Feb 25, 2026
1bbbb87
refactor: apply code review suggestions
web-padawan Feb 25, 2026
2bf006f
docs: remove mention of primary variant
web-padawan Feb 25, 2026
b40215b
docs: also add theme switcher to best practices example
web-padawan Feb 25, 2026
4056b95
Merge branch 'main' into docs/notification-replace-lumo
web-padawan Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions articles/building-apps/forms-data/handle-uploads.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ public class UploadExampleView extends VerticalLayout {
Notification notification = // <4>
Notification.show("Upload failed");
notification.addThemeVariants(
NotificationVariant.LUMO_ERROR);
NotificationVariant.ERROR);
}
}));

Expand All @@ -55,7 +55,7 @@ public class UploadExampleView extends VerticalLayout {
Notification notification =
Notification.show(event.getErrorMessage());
notification.addThemeVariants(
NotificationVariant.LUMO_WARNING);
NotificationVariant.WARNING);
});

add(upload);
Expand Down Expand Up @@ -250,7 +250,7 @@ upload.addFileRejectedListener(event -> {
Notification notification =
Notification.show(event.getErrorMessage());
notification.addThemeVariants(
NotificationVariant.LUMO_WARNING);
NotificationVariant.WARNING);
});
----

Expand All @@ -271,7 +271,7 @@ UploadHandler.inMemory((metadata, data) -> {
Notification notification = Notification.show(
"Upload failed: " + e.getMessage());
notification.addThemeVariants(
NotificationVariant.LUMO_ERROR);
NotificationVariant.ERROR);
}
});
----
Expand Down
14 changes: 7 additions & 7 deletions articles/building-apps/ui-basics/show-notification.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ public class NotificationExampleView extends VerticalLayout {
Button successButton = new Button("Show success", event -> {
Notification notification = Notification.show("File uploaded");
notification.addThemeVariants(
NotificationVariant.LUMO_SUCCESS);
NotificationVariant.SUCCESS);
});
// Error notification with a close button
Button errorButton = new Button("Show error", event -> {
Notification notification = new Notification();
notification.addThemeVariants(
NotificationVariant.LUMO_ERROR);
NotificationVariant.ERROR);
notification.setDuration(0);
Span message = new Span("Upload failed. Check your connection.");
Expand Down Expand Up @@ -97,7 +97,7 @@ Theme variants give notifications a visual style that matches their purpose. The
[source,java]
----
Notification notification = Notification.show("File uploaded");
notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
notification.addThemeVariants(NotificationVariant.SUCCESS);
----

The available Lumo variants are:
Expand Down Expand Up @@ -177,7 +177,7 @@ The following example shows a persistent error notification with a Retry button
[source,java]
----
Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.LUMO_ERROR);
notification.addThemeVariants(NotificationVariant.ERROR);
notification.setDuration(0);
notification.setPosition(Notification.Position.MIDDLE);
Expand Down Expand Up @@ -216,13 +216,13 @@ public final class Notifications {
public static void showSuccess(String message) {
Notification notification = Notification.show(message);
notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
notification.addThemeVariants(NotificationVariant.SUCCESS);
notification.setPosition(Notification.Position.BOTTOM_START);
}
public static void showError(String message) {
Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.LUMO_ERROR);
notification.addThemeVariants(NotificationVariant.ERROR);
notification.setDuration(0);
notification.setPosition(Notification.Position.MIDDLE);
Expand All @@ -245,7 +245,7 @@ public final class Notifications {
public static void showRetryableError(String message,
Runnable retryAction) {
Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.LUMO_ERROR);
notification.addThemeVariants(NotificationVariant.ERROR);
notification.setDuration(0);
notification.setPosition(Notification.Position.MIDDLE);
Expand Down
18 changes: 9 additions & 9 deletions articles/components/notification/index.adoc
View file
Open in desktop
Copy link
Contributor

@sissbruecker sissbruecker Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the best practices examples, was there a technical limitation on why we can't have the theme switcher there? IMO not so relevant to be able to switch themes in those, but it feels a bit inconsistent at first.

Copy link
Member Author

@web-padawan web-padawan Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added theme switcher and updated examples to use horizontal layout to make them look better in Aura.

Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Persistent notifications should contain a Button that closes the notification, o

Notifications can be positioned in the viewport in seven non-stretched positions, or stretched across the top or bottom:

[.example.position]
[.example.position,themes="lumo,aura"]
--
Use the `position` attribute in HTML templates (e.g., `<vaadin-notification position="top-end"></vaadin-notification>`).

Expand Down Expand Up @@ -153,7 +153,7 @@ Notifications can contain interactive content (e.g., Buttons or links) that allo

For example, if an operation fails, the error notification could offer the user the opportunity to try again. Or it could contain a link to a view that allows the user to resolve the problem.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,html]
Expand Down Expand Up @@ -183,7 +183,7 @@ endif::[]

In situations where the user might want to revert an action, display an "Undo" button.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,html]
Expand Down Expand Up @@ -213,7 +213,7 @@ endif::[]

Notifications can also contain links to relevant information.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,html]
Expand Down Expand Up @@ -248,7 +248,7 @@ Make sure that keyboard-only users can access interactive elements in notificati

Make the notification persistent to prevent it from disappearing before the user has had a chance to react. Provide a keyboard shortcut -- either to trigger the action itself or to move focus to the notification card -- in cases where multiple interactive elements are present. Finally, make the shortcut discoverable, for example, by displaying it as part of the notification's content.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,typescript]
Expand Down Expand Up @@ -281,7 +281,7 @@ endif::[]

Icons and other content formatting can be used to provide information and helpful visual cues. For example, you might do this to make error and success notifications easier to distinguish for users with color blindness.

[.example.rich]
[.example.rich,themes="lumo,aura"]
--

ifdef::lit[]
Expand Down Expand Up @@ -350,7 +350,7 @@ Notification.show(
&nbsp;
<span>
How about lunch at
<span style="color: var(--lumo-primary-text-color)">12:30pm</span>?
<i>12:30pm</i>?
</span>
`,
{ position: 'middle' }
Expand Down Expand Up @@ -397,7 +397,7 @@ endif::[]
Notifications should be brief and to the point. Try to limit the content to one or two lines. More information can be provided through an embedded link or Button.

.[example-title]#Show a preview of longer content, and link to the full details.#
[.example.render-only.do]
[.example.render-only.do,themes="lumo,aura"]
--
ifdef::lit,flow[]
[source,typescript]
Expand All @@ -408,7 +408,7 @@ endif::[]
--

.[example-title]#Don't display all details in the notification.#
[.example.render-only.dont]
[.example.render-only.dont,themes="lumo,aura"]
--
ifdef::lit,flow[]
[source,typescript]
Expand Down
63 changes: 16 additions & 47 deletions articles/components/notification/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@ Notification supports the following style variants.
|===
| Variant | Description | Supported by

|`primary`
|Used for important informational messages or to draw extra attention
|Lumo

|`success`
|Used to display success messages
|Lumo
|Lumo, Aura

|`warning`
|Used to display warnings
|Lumo
|Lumo, Aura

|`error`
|Used to display errors
|Lumo
|Lumo, Aura

|`info`
Copy link
Contributor

@sissbruecker sissbruecker Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any benefit to still listing primary? I assume info should be used instead from now on?

Copy link
Member Author

@web-padawan web-padawan Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Removed mention of "primary".

|Used for informational messages
|Lumo, Aura

|`contrast`
|Used to distinguish the notification from the rest of the UI
Expand All @@ -44,7 +44,7 @@ Notification supports the following style variants.

The `success` variant can be used to display success messages, such as when a task or operation is completed.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,typescript]
Expand Down Expand Up @@ -76,7 +76,7 @@ Users shouldn't be notified always, or even frequently, of successful operations

The `warning` variant can be used to display warnings.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,html]
Expand Down Expand Up @@ -109,7 +109,7 @@ Warning notifications should be persistent, and provide the user with a button t

The `error` variant can be used to display errors.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,html]
Expand Down Expand Up @@ -141,67 +141,36 @@ Notifications are non-modal and can be ignored. Therefore, they're usually inapp
The built-in error message feature, included with input field components, should be used for field-specific input validation errors.


=== Primary
=== Info

The `primary` variant can be used for important informational messages or to draw extra attention to a notification.
The `info` variant can be used for informational messages or to draw extra attention to a notification.

[.example]
[.example,themes="lumo,aura"]
--
ifdef::lit[]
[source,typescript]
----
include::{root}/frontend/demo/component/notification/notification-primary.ts[render,frame,tags=snippet,indent=0,group=Lit]
include::{root}/frontend/demo/component/notification/notification-info.ts[render,frame,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/notification/NotificationPrimary.java[render,frame,tags=snippet,indent=0,group=Flow]
include::{root}/src/main/java/com/vaadin/demo/component/notification/NotificationInfo.java[render,frame,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/notification/react/notification-primary.tsx[render,frame,tags=snippet,indent=0,group=React]
include::{root}/frontend/demo/component/notification/react/notification-info.tsx[render,frame,tags=snippet,indent=0,group=React]
----
endif::[]

--


=== Contrast

The `contrast` variant can improve legibility and distinguish the notification from the rest of the UI.

[.example]
--
ifdef::lit[]
[source,typescript]
----
include::{root}/frontend/demo/component/notification/notification-contrast.ts[render,frame,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/notification/NotificationContrast.java[render,frame,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/notification/react/notification-contrast.tsx[render,frame,tags=snippet,indent=0,group=React]
----
endif::[]

--



include::../_styling-section-theming-props.adoc[tag=style-properties]

==== Notification Card Properties
Expand Down
4 changes: 2 additions & 2 deletions articles/flow/advanced/downloads.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,10 +295,10 @@ InputStreamDownloadHandler handler = DownloadHandler.fromInputStream(event ->
progressBar.setVisible(false);
if (success) {
Notification.show("Download completed", 3000, Notification.Position.BOTTOM_START)
.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
.addThemeVariants(NotificationVariant.SUCCESS);
} else {
Notification.show("Download failed", 3000, Notification.Position.BOTTOM_START)
.addThemeVariants(NotificationVariant.LUMO_ERROR);
.addThemeVariants(NotificationVariant.ERROR);
}
});
----
Expand Down
14 changes: 7 additions & 7 deletions articles/getting-started/tutorial/add-data.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ class ProductCatalogView extends HorizontalLayout {
"Another user has edited the same product. "
+ "Please refresh and try again.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
} else {
Expand Down Expand Up @@ -389,7 +389,7 @@ class ProductCatalogView extends HorizontalLayout {
"Another user has edited the same product. "
+ "Please refresh and try again.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
} else {
Expand Down Expand Up @@ -563,7 +563,7 @@ class ProductCatalogView extends HorizontalLayout {
"Another user has edited the same product. "
+ "Please refresh and try again.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
} else {
Expand Down Expand Up @@ -690,15 +690,15 @@ class ProductCatalogView extends HorizontalLayout {
"Another user has edited the same product. "
+ "Please refresh and try again.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
// tag::snippet[]
} else if (exception instanceof DataIntegrityViolationException) {
var notification = new Notification(
"The SKU is already in use. Please enter another one.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
// end::snippet[]
Expand Down Expand Up @@ -898,14 +898,14 @@ class ProductCatalogView extends HorizontalLayout {
"Another user has edited the same product. "
+ "Please refresh and try again.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
} else if (exception instanceof DataIntegrityViolationException) {
var notification = new Notification(
"The SKU is already in use. Please enter another one.");
notification.setPosition(Notification.Position.MIDDLE);
notification.addThemeVariants(NotificationVariant.LUMO_WARNING);
notification.addThemeVariants(NotificationVariant.WARNING);
notification.setDuration(3000);
notification.open();
} else {
Expand Down
Loading