Notification

Theme Variants
Duration
Position
Stacking
Size
Interactive Elements
Icons and Other Rich Formatting
Best Practices
Related Components

Notifications are used to provide feedback to the user. They communicate information about activities, processes, and events in the application.

Open in a
new tab

Source code

notification-basic-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-notification/vaadin-notification';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card slot="middle">
        Financial report generated
      </vaadin-notification-card>
    `;
  }
}
notification-basic-preview.ts

Open in a
new tab

Source code

NotificationBasic.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.router.Route;

@Route("notification-basic")
public class NotificationBasic extends Div {

  public NotificationBasic() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      // tag::snippet[]
      // When creating a notification using the `show` static method,
      // the duration is 5-sec by default.
      Notification notification = Notification.show("Financial report generated");
      // end::snippet[]
      notification.setPosition(Notification.Position.MIDDLE);

      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

}

Theme Variants

Success

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

Open in a
new tab

Source code

notification-success-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-notification/vaadin-notification';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="success" slot="middle">
        Application submitted!
      </vaadin-notification-card>
    `;
  }
}
notification-success-preview.ts

Open in a
new tab

Source code

NotificationSuccess.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-success")
public class NotificationSuccess extends Div {

  public NotificationSuccess() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      // tag::snippet[]
      Notification notification = Notification.show("Application submitted!");
      notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
      // end::snippet[]
      notification.setPosition(Notification.Position.MIDDLE);

      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

}

Most successful operations should not be declared with notifications, as these can distract the user more than provide useful information. Only use success notifications for operations whose successful completion may otherwise be difficult to discern.

Error

The error theme variant can be used to display alerts, failures, or warnings.

Open in a
new tab

Source code

notification-error-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="error" slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
          <div>Failed to generate report</div>
          <vaadin-button theme="tertiary-inline">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
notification-error-preview.ts

Open in a
new tab

Source code

NotificationError.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("notification-error")
public class NotificationError extends Div {

  public NotificationError() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      Notification notification = show();
      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

  public Notification show() {
    // tag::snippet[]
    // 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();
    notification.addThemeVariants(NotificationVariant.LUMO_ERROR);

    Div text = new Div(new Text("Failed to generate report"));

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

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

    notification.add(layout);
    notification.open();
    // end::snippet[]

    notification.setPosition(Notification.Position.MIDDLE);

    return notification;
  }

}

Error notifications should be persistent, and provide the user with a button that closes the notification and/or allows the user to take appropriate action.

Notifications are non-modal and can be ignored, making them inappropriate for displaying unexpected technical errors that prevent the application from functioning, or situations that require immediate user action. Use a modal Dialog in such situations.

Primary

The primary theme variant can be used for important informational messages and/or to draw extra attention to it.

Open in a
new tab

Source code

notification-primary-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-notification/vaadin-notification';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="primary" slot="middle">
        New project plan available
      </vaadin-notification-card>
    `;
  }
}
notification-primary-preview.ts

Open in a
new tab

Source code

NotificationPrimary.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-primary")
public class NotificationPrimary extends Div {

  public NotificationPrimary() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      // tag::snippet[]
      Notification notification = Notification.show("New project plan available");
      notification.addThemeVariants(NotificationVariant.LUMO_PRIMARY);
      // end::snippet[]
      notification.setPosition(Notification.Position.MIDDLE);

      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

}

Contrast

A high-contrast version that improves legibility and distinguishes it from the rest of the UI.

Open in a
new tab

Source code

notification-contrast-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-notification/vaadin-notification';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="contrast" slot="middle">
        5 tasks deleted
      </vaadin-notification-card>
    `;
  }
}
notification-contrast-preview.ts

Open in a
new tab

Source code

NotificationContrast.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-contrast")
public class NotificationContrast extends Div {

  public NotificationContrast() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      // tag::snippet[]
      Notification notification = Notification.show("5 tasks deleted");
      notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);
      // end::snippet[]
      notification.setPosition(Notification.Position.MIDDLE);

      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

}

Duration

Notifications stay on-screen for 5 seconds by default. The duration is in milliseconds, and should be based on content and importance:

Use short durations for notifications that have:

Short text content
Lesser importance (for example, operations that finished without errors)
No interactive elements

Use longer durations for notifications that have:

Longer text content
Higher importance (for example, errors)
Interactive elements (for example, links or undo actions)

A duration of at least 5 seconds is recommended to ensure that the user has a chance to see and understand the notification.

Persistent Notifications

Setting the duration to zero disables auto closing, keeping the notification visible until explicitly dismissed by the user. This should be used for notifications that provide vital information to the user, such as errors. Persistent notifications should contain a Button that closes the notification and/or allows the user to take appropriate action.

Less important notifications should not be persistent, and instead disappear automatically after an appropriate delay.

Position

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

Open in a
new tab

Source code

NotificationPosition.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.Notification.Position;
import com.vaadin.flow.router.Route;

@Route("notification-position")
public class NotificationPosition extends Div {

  public NotificationPosition() {
    setClassName("notification-position-example");

    // tag::snippet[]
    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)
    );
    // end::snippet[]
  }

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

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

}
notification-position-example.css.notification-position-example,
:host(.notification-position-example) {
  display: grid !important;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

.notification-position-example vaadin-button,
:host(.notification-position-example) vaadin-button {
  margin: 0;
  max-width: 100%;
}

.notification-position-example vaadin-button:nth-child(2),
.notification-position-example vaadin-button:nth-child(6),
:host(.notification-position-example) vaadin-button:nth-child(2),
:host(.notification-position-example) vaadin-button:nth-child(6) {
  margin-inline-end: auto;
}

.notification-position-example vaadin-button:nth-child(3),
.notification-position-example vaadin-button:nth-child(5),
.notification-position-example vaadin-button:nth-child(7),
:host(.notification-position-example) vaadin-button:nth-child(3),
:host(.notification-position-example) vaadin-button:nth-child(5),
:host(.notification-position-example) vaadin-button:nth-child(7) {
  margin: 0 auto;
}

.notification-position-example vaadin-button:nth-child(4),
.notification-position-example vaadin-button:nth-child(8),
:host(.notification-position-example) vaadin-button:nth-child(4),
:host(.notification-position-example) vaadin-button:nth-child(8) {
  margin-inline-start: auto;
}

.notification-position-example vaadin-button:nth-child(1),
.notification-position-example vaadin-button:nth-child(5),
.notification-position-example vaadin-button:nth-child(9),
:host(.notification-position-example) vaadin-button:nth-child(1),
:host(.notification-position-example) vaadin-button:nth-child(5),
:host(.notification-position-example) vaadin-button:nth-child(9) {
  grid-column-start: 1;
  grid-column-end: 4;
}

Recommendations

Top End or Bottom Start are recommended for most notifications, as these are non-obtrusive but still noticeable.
Middle is the most disruptive position, and only be used for important notifications like errors.
Bottom End is the least obtrusive position, but can go unnoticed.
Stretch notifications, that span the full width of the viewport, are more disruptive, and should be reserved for important notifications whose contents require more space.
Applications with a notification button or drop-down in the header or footer should position notifications to appear in the same part of the screen.
For a consistent user experience, use one or two positions throughout the application.
Avoid using positions that may obstruct important parts of the UI, such as navigation.

Note

The Flow styling issue

The Flow notification component renders rich content via an intermediate <flow-component-renderer> element. This can prevent notification content from using the full width, when using top stretch or bottom stretch positioning. To work around this issue, add the following CSS rule to a global style sheet:

Source code

CSSvaadin-notification-card flow-component-renderer,
vaadin-notification-card flow-component-renderer > div {
  display: contents;
}

See Vaadin Flow Components issue 1876.

Stacking

Multiple simultaneously displayed notifications are stacked vertically, depending on their positioning:

When using the bottom half of the screen as the position, a new notification appears below the older notifications.
With the position set to the top half, a new notification appears above the existing notifications.

Size

The notification card is automatically sized based on its content.

In large viewports, the card’s maximum width is ⅓ of the viewport.
In small viewports, the card always takes up the entire width of the viewport.

Interactive Elements

Notifications can contain interactive content like Buttons or links that allow the user to perform related actions.

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

Open in a
new tab

Source code

notification-retry-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="error" slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
          <div>Failed to generate report</div>
          <vaadin-button theme="tertiary-inline" style="margin-left: var(--lumo-space-xl);">
            Retry
          </vaadin-button>
          <vaadin-button theme="tertiary-inline" aria-label="Close">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
notification-retry-preview.ts

Open in a
new tab

Source code

NotificationRetry.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("notification-retry")
public class NotificationRetry extends Div {

  public NotificationRetry() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      Notification notification = show();
      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

  private Notification show() {
    // tag::snippet[]
    // 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();
    notification.addThemeVariants(NotificationVariant.LUMO_ERROR);

    Div statusText = new Div(new Text("Failed to generate report"));

    Button retryButton = new Button("Retry");
    retryButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
    retryButton.getElement().getStyle().set("margin-left", "var(--lumo-space-xl)");
    retryButton.addClickListener(event -> {
      notification.close();
    });

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

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

    notification.add(layout);
    notification.open();
    // end::snippet[]

    notification.setPosition(Notification.Position.MIDDLE);

    return notification;
  }

}

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

Open in a
new tab

Source code

notification-undo-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="contrast" slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
          <div>5 tasks deleted</div>
          <vaadin-button theme="tertiary-inline" style="margin-left: var(--lumo-space-xl);">
            Undo
          </vaadin-button>
          <vaadin-button theme="tertiary-inline" aria-label="Close">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
notification-undo-preview.ts

Open in a
new tab

Source code

NotificationUndo.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("notification-undo")
public class NotificationUndo extends Div {

  public NotificationUndo() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      Notification notification = show();
      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

  public Notification show() {
    // tag::snippet[]
    Notification notification = new Notification();
    notification.setDuration(10000);
    notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);

    Div statusText = new Div(new Text("5 tasks deleted"));

    Button undoButton = new Button("Undo");
    undoButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
    undoButton.getElement().getStyle().set("margin-left", "var(--lumo-space-xl)");
    undoButton.addClickListener(event -> {
      notification.close();
    });

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

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

    notification.add(layout);
    notification.open();
    // end::snippet[]

    notification.setPosition(Notification.Position.MIDDLE);

    return notification;
  }

}

Notifications can also contain links to relevant information.

Open in a
new tab

Source code

notification-link-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
          <div>Jason Bailey mentioned you in <a href="#">Project Q4</a></div>
          <vaadin-button theme="tertiary-inline">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
notification-link-preview.ts

Open in a
new tab

Source code

NotificationLink.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("notification-link")
public class NotificationLink extends Div {

  public NotificationLink() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      Notification notification = show();
      notification.addDetachListener(detachEvent -> button.setEnabled(true));
    });

    add(button);
  }

  public Notification show() {
    // tag::snippet[]
    // 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.getElement().setAttribute("aria-label", "Close");
    closeButton.addClickListener(event -> {
      notification.close();
    });

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

    notification.add(layout);
    notification.open();
    // end::snippet[]

    notification.setPosition(Notification.Position.MIDDLE);

    return notification;
  }

}

Making Interactive Elements Keyboard-Accessible

Take care to ensure that keyboard-only users can access interactive elements in notifications:

Make the notification persistent, to prevent it from disappearing before the user has had a chance to interact with it.
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.
Make the shortcut discoverable, for example, by displaying it as part of the notification’s content.

Open in a
new tab

Source code

notification-keyboard-a11y-preview.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import { applyTheme } from 'Frontend/generated/theme';

const isMac = /Macintosh|MacIntel|MacPPC|Mac68K/.test(window.navigator.platform);

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="contrast" slot="middle">
        <vaadin-horizontal-layout style="align-items: center;">
          <div>5 tasks deleted</div>
          <vaadin-button theme="primary" style="margin-left: var(--lumo-space-xl);">
            Undo ${isMac ? '⌘' : 'Ctrl-'}Z
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
notification-keyboard-a11y-preview.ts

Open in a
new tab

Source code

NotificationKeyboardA11y.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.KeyModifier;
import com.vaadin.flow.component.Shortcuts;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("notification-keyboard-a11y")
public class NotificationKeyboardA11y extends Div {

  public NotificationKeyboardA11y() {
    Button button = new Button("Try it");
    button.addClickListener(clickEvent -> {
      button.setEnabled(false);

      Notification notification = show();
      notification.addDetachListener(detachEvent -> button.setEnabled(true));
      setupUndoShortcut(notification);
    });

    add(button);
  }

  // tag::snippet[]
  public Notification show() {
    Notification notification = new Notification();
    notification.setDuration(10000);
    notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);

    Div statusText = new Div(new Text("5 tasks deleted"));

    Button undoButton = new Button();
    undoButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    undoButton.getElement().getStyle().set("margin-left", "var(--lumo-space-xl)");
    undoButton.getElement().executeJs(
      "const isMac = /Macintosh|MacIntel|MacPPC|Mac68K/.test(window.navigator.platform);" +
      "this.textContent = `Undo ${isMac ? '⌘' : 'Ctrl-'}Z`;"
    );
    undoButton.addClickListener(event -> {
      notification.close();
    });

    HorizontalLayout layout = new HorizontalLayout(statusText, undoButton);
    layout.setAlignItems(Alignment.CENTER);

    notification.add(layout);
    notification.open();
    // end::snippet[]

    notification.setPosition(Notification.Position.MIDDLE);
    // tag::snippet[]

    return notification;
  }
  // end::snippet[]

  public void setupUndoShortcut(Notification notification) {
    Shortcuts.addShortcutListener(notification, notification::close, Key.of("z"), KeyModifier.META);
    Shortcuts.addShortcutListener(notification, notification::close, Key.of("z"), KeyModifier.CONTROL);
  }

}

Icons and Other Rich Formatting

Icons and other content formatting can be used to provide information and helpful visual cues, for example, to make errors and success notifications easier to distinguish for users with color blindness.

Open in a
new tab

Source code

notification-rich-preview.tsimport { html, LitElement, customElement } from 'lit-element';
import '@vaadin/vaadin-avatar/vaadin-avatar';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-icons/vaadin-icons';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-notification/vaadin-notification';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-rich-preview')
export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card theme="success" slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center">
          <iron-icon icon="vaadin:check-circle"></iron-icon>
          <div>Application submitted!</div>
          <vaadin-button style="margin: 0 0 0 var(--lumo-space-l)">View</vaadin-button>
          <vaadin-button theme="tertiary-inline">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>

      <vaadin-notification-card theme="error" slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center">
          <iron-icon icon="vaadin:warning"></iron-icon>
          <div>Failed to generate report</div>
          <vaadin-button style="margin: 0 0 0 var(--lumo-space-l)">Retry</vaadin-button>
          <vaadin-button theme="tertiary-inline">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>

      <vaadin-notification-card slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center">
          <vaadin-avatar name="Jason Bailey"></vaadin-avatar>
          <div><b>Jason Bailey</b> mentioned you in <a href="#">Project Q4</a></div>
          <vaadin-button theme="tertiary-inline">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>

      <vaadin-notification-card slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center">
          <iron-icon
            icon="vaadin:check-circle"
            style="color: var(--lumo-success-color)"
          ></iron-icon>
          <div>
            <b style="color: var(--lumo-success-text-color);">Upload successful</b>
            <div
              style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
            >
              <b>Financials.xlsx</b> is now available in <a href="#">Documents</a>
            </div>
          </div>
          <vaadin-button theme="tertiary-inline">
            <iron-icon icon="lumo:cross"></iron-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
notification-rich-preview.ts

Open in a
new tab

Source code

NotificationRich.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.avatar.Avatar;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

import java.util.function.Supplier;

import static com.vaadin.flow.component.button.ButtonVariant.LUMO_CONTRAST;
import static com.vaadin.flow.component.button.ButtonVariant.LUMO_ERROR;
import static com.vaadin.flow.component.button.ButtonVariant.LUMO_PRIMARY;
import static com.vaadin.flow.component.button.ButtonVariant.LUMO_SUCCESS;
import static com.vaadin.flow.component.button.ButtonVariant.LUMO_TERTIARY_INLINE;

@Route("notification-rich")
public class NotificationRich extends HorizontalLayout {
    public static ComponentEventListener<ClickEvent<Button>> createClickHandler(
            Supplier<Notification> notificationSupplier
    ) {
        return clickEvent -> {
            Button btn = clickEvent.getSource();
            btn.setEnabled(false);

            Notification notification = notificationSupplier.get();
            notification.setPosition(Notification.Position.MIDDLE);
            notification.setDuration(5000);
            notification.open();
            notification.addDetachListener(detachEvent -> btn.setEnabled(true));
        };
    }

    public NotificationRich() {
        Button successBtn = new Button(
                "Try it",
                createClickHandler(NotificationRich::createSubmitSuccess));
        successBtn.addThemeVariants(LUMO_SUCCESS, LUMO_PRIMARY);

        Button errorBtn = new Button(
                "Try it",
                createClickHandler(NotificationRich::createReportError));
        errorBtn.addThemeVariants(LUMO_ERROR, LUMO_PRIMARY);

        Button mentionBtn = new Button(
                "Try it",
                createClickHandler(NotificationRich::createMentionNotification));
        mentionBtn.addThemeVariants(LUMO_CONTRAST);

        Button uploadSuccessBtn = new Button(
                "Try it",
                createClickHandler(NotificationRich::createUploadSuccess));
        uploadSuccessBtn.addThemeVariants(LUMO_SUCCESS);

        setJustifyContentMode(JustifyContentMode.CENTER);
        add(successBtn, errorBtn, mentionBtn, uploadSuccessBtn);
    }

    // tag::snippet[]
    public static Notification createSubmitSuccess() {
        Notification notification = new Notification();
        notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);

        Icon icon = VaadinIcon.CHECK_CIRCLE.create();
        Div info = new Div(new Text("Application submitted!"));

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

        HorizontalLayout layout = new HorizontalLayout(
                icon, info, viewBtn,
                createCloseBtn(notification));
        layout.setAlignItems(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();
        Div info = new Div(new Text("Failed to generate report!"));

        Button retryBtn = new Button(
                "Retry",
                clickEvent -> notification.close());
        retryBtn.getStyle().set("margin", "0 0 0 var(--lumo-space-l)");

        HorizontalLayout layout = new HorizontalLayout(
                icon, info, retryBtn,
                createCloseBtn(notification));
        layout.setAlignItems(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(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")
                .set("color", "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)")
                .set("color", "var(--lumo-secondary-text-color)");

        HorizontalLayout layout = new HorizontalLayout(
                icon, info,
                createCloseBtn(notification));
        layout.setAlignItems(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;
    }
    // end::snippet[]

}

Best Practices

Use Sparingly

Notifications are disruptive by design and should be used sparingly. Use fewer notifications by reserving them for more important information that may otherwise go unnoticed by the user.

Less urgent notifications can be provided through a link or drop-down in the application header or footer, instead of immediate notifications.

Open in a
new tab

Source code

NotificationPopup.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.contextmenu.ContextMenu;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.router.Route;

import java.util.Arrays;

@Route("notification-popup")
public class NotificationPopup extends Div {

    public NotificationPopup() {
        // tag::snippet[]
        Span numberOfNotifications = new Span("4");
        numberOfNotifications.getElement()
                .getThemeList()
                .addAll(Arrays.asList("badge", "error", "primary", "small", "pill"));
        numberOfNotifications.getStyle()
                .set("position", "absolute")
                .set("transform", "translate(-40%, -85%)");

        Button bellBtn = new Button(VaadinIcon.BELL_O.create());
        bellBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
        bellBtn.getElement().appendChild(numberOfNotifications.getElement());

        Div sampleNotification = new Div(new Text("Show notifications here"));
        sampleNotification.getStyle().set("padding", "var(--lumo-space-l)");

        ContextMenu menu = new ContextMenu();
        menu.setOpenOnClick(true);
        menu.setTarget(bellBtn);
        menu.add(sampleNotification);
        // end::snippet[]

        add(bellBtn);
    }


}

Limit Content Length

Aim for one or two lines of content. Notifications should be brief and to the point. More information can be provided through an embedded link or Button.

Open in a
new tab

Do show a preview of longer content, and link to the full details

Source code

notification-content-length-do.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card slot="middle">
        <div>
          <div>Aria Bailey</div>
          <div style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);">
            Yeah, I know. But could you help me with...
          </div>
        </div>
        <vaadin-button>View</vaadin-button>
        <vaadin-button theme="tertiary-inline">
          <iron-icon icon="lumo:cross"></iron-icon>
        </vaadin-button>
      </vaadin-notification-card>
    `;
  }
}
notification-content-length-do.ts

Open in a
new tab

Don’t display all details in the notification

Source code

notification-content-length-dont.tsimport { html, LitElement } from 'lit-element';
import '@vaadin/vaadin-lumo-styles/icons';
import '@vaadin/vaadin-button/vaadin-button';
import '@vaadin/vaadin-notification/vaadin-notification';
import { applyTheme } from 'Frontend/generated/theme';

export class Example extends LitElement {
  protected createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  render() {
    return html`
      <vaadin-notification-card slot="middle">
        <div>
          <div>New message from Aria Bailey</div>
          <div style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);">
            Yeah, I know. But could you help me with this. I’m not sure where the bug is in my CSS?
            The checkmark doesn’t get the right color. I’m trying to use the CSS custom properties
            from our design system, but for some reason it’s not working.
          </div>
        </div>
        <vaadin-button theme="tertiary-inline">
          <iron-icon icon="lumo:cross"></iron-icon>
        </vaadin-button>
      </vaadin-notification-card>
    `;
  }
}
notification-content-length-dont.ts

Component	Usage recommendations
Dialog	Dialog should be used instead of Notification for anything that requires immediate user action.

Component

Usage recommendations

Dialog

Dialog should be used instead of Notification for anything that requires immediate user action.

52817CB4-44DD-49EF-B100-550906E6BABB

Docs

Docs

Notification

Theme Variants

Success

Error

Primary

Contrast

Duration

Persistent Notifications

Position

Recommendations

Stacking

Size

Interactive Elements

Making Interactive Elements Keyboard-Accessible

Icons and Other Rich Formatting

Best Practices

Use Sparingly

Limit Content Length

Docs

Theme Variants

Success

Error

Primary

Contrast

Duration

Persistent Notifications

Position

Recommendations

Stacking

Size

Interactive Elements

Making Interactive Elements Keyboard-Accessible

Icons and Other Rich Formatting

Best Practices

Use Sparingly

Limit Content Length

Related Components