Notification

Notification is used to provide feedback to the user about activities, processes, and events in the application.

Usage
Styling

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

Notification is used to provide feedback to the user about activities, processes, and events in the application.

Source code

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

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() {
        // 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.setDuration(0);
    }

}
notification-basic.tsximport React from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  // tag::snippet[]
  const notification = Notification.show('Financial report generated', {
    position: 'middle',
    duration: 0,
  });
  // end::snippet[]

  return <></>;
}

notification-basic.tsimport { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-basic')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('Financial report generated', {
      position: 'middle',
      duration: 0,
    });
    // end::snippet[]
  }
}

Theme Variants

Notification comes with a few theme variants: success; warning; error; primary; and contrast. These variants are described in the following sub-sections:

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

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

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
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() {
        // tag::snippet[]
        Notification notification = Notification.show("Application submitted!");
        notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-success.tsximport React from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  // tag::snippet[]
  const notification = Notification.show('Financial report generated', {
    position: 'middle',
    duration: 0,
    theme: 'success',
  });
  // end::snippet[]

  return <></>;
}

notification-success.tsimport { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-success')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('Application submitted!', {
      position: 'middle',
      duration: 0,
      theme: 'success',
    });
    // end::snippet[]
  }
}

Users shouldn’t be notified always, or even frequently, of successful operations. Too many notifications can be more distracting than helpful to users. Use success notifications only for operations whose successful completion may otherwise be difficult to discern.

Warning

The warning theme variant can be used to display warnings.

Open in a
new tab

Source code

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

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.HtmlComponent;
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.icon.Icon;
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.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;

@Route("notification-warning")
public class NotificationWarning extends Div {

    public NotificationWarning() {
        Button button = new Button("Show notification");
        button.addClickListener(clickEvent -> {
            button.setEnabled(false);

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

        add(button);
        show();
    }

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

        Div text = new Div(new Text(
                "Your session will expire in 5 minutes due to inactivity."),
                new HtmlComponent("br"),
                new Text("Close this warning to continue working."));

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

        notification.setPosition(Notification.Position.MIDDLE);

        return notification;
    }

}
notification-warning.tsximport '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const notificationOpened = useSignal(true);

  return (
    <>
      <Button
        disabled={notificationOpened.value}
        onClick={() => {
          notificationOpened.value = true;
        }}
      >
        Show notification
      </Button>

      {/* tag::snippet[] */}
      {/* The duration is set to 0-sec to prevent the notification from auto-close. */}
      <Notification
        theme="warning"
        duration={0}
        position="middle"
        opened={notificationOpened.value}
        onOpenedChanged={(event) => {
          notificationOpened.value = event.detail.value;
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <div>
            Your session will expire in 5 minutes due to inactivity.
            <br />
            Close this warning to continue working.
          </div>

          <Button
            theme="tertiary-inline"
            onClick={() => {
              notificationOpened.value = false;
            }}
          >
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>
      {/* end::snippet[] */}
    </>
  );
}

notification-warning.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { NotificationOpenedChangedEvent } from '@vaadin/notification';
import type { NotificationLitRenderer } from '@vaadin/notification/lit.js';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-warning')
export class Example extends LitElement {
  @state()
  private notificationOpened = true;

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

  static override styles = css`
    :host {
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(100vh - var(--docs-space-l) * 2);
    }
  `;

  protected override render() {
    return html`
      <vaadin-button .disabled="${this.notificationOpened}" @click="${this.open}">
        Show notification
      </vaadin-button>

      <!-- tag::snippet[] -->
      <!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
      <vaadin-notification
        theme="warning"
        duration="0"
        position="middle"
        .opened="${this.notificationOpened}"
        @opened-changed="${(e: NotificationOpenedChangedEvent) => {
          this.notificationOpened = e.detail.value;
        }}"
        ${notificationRenderer(this.renderer, [])}
      ></vaadin-notification>
      <!-- end::snippet[] -->
    `;
  }

  renderer: NotificationLitRenderer = () => html`
    <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
      <div>
        Your session will expire in 5 minutes due to inactivity.<br />
        Close this warning to continue working.
      </div>
      <vaadin-button theme="tertiary-inline" @click="${this.close}" aria-label="Close">
        <vaadin-icon icon="lumo:cross"></vaadin-icon>
      </vaadin-button>
    </vaadin-horizontal-layout>
  `;

  private open() {
    this.notificationOpened = true;
  }

  private close() {
    this.notificationOpened = false;
  }
}

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

Error

The error theme variant can be used to display errors.

Open in a
new tab

Source code

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

import com.vaadin.flow.component.html.Div;
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.icon.Icon;
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.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;

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

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

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

        add(button);
        show();
    }

    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.setAriaLabel("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;
    }

}
notification-error.tsximport '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const notificationOpened = useSignal(true);

  return (
    <>
      <Button
        disabled={notificationOpened.value}
        onClick={() => {
          notificationOpened.value = true;
        }}
      >
        Show notification
      </Button>

      {/* tag::snippet[] */}
      {/* The duration is set to 0-sec to prevent the notification from auto-close. */}
      <Notification
        theme="error"
        duration={0}
        position="middle"
        opened={notificationOpened.value}
        onOpenedChanged={(e) => {
          notificationOpened.value = e.detail.value;
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <div>Failed to generate report</div>
          <Button
            theme="tertiary-inline"
            onClick={() => {
              notificationOpened.value = false;
            }}
            aria-label="Close"
          >
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>
      {/* end::snippet[] */}
    </>
  );
}

notification-error.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { NotificationOpenedChangedEvent } from '@vaadin/notification';
import type { NotificationLitRenderer } from '@vaadin/notification/lit.js';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-error')
export class Example extends LitElement {
  @state()
  private notificationOpened = true;

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

  protected override render() {
    return html`
      <vaadin-button .disabled="${this.notificationOpened}" @click="${this.open}">
        Show notification
      </vaadin-button>

      <!-- tag::snippet[] -->
      <!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
      <vaadin-notification
        theme="error"
        duration="0"
        position="middle"
        .opened="${this.notificationOpened}"
        @opened-changed="${(e: NotificationOpenedChangedEvent) => {
          this.notificationOpened = e.detail.value;
        }}"
        ${notificationRenderer(this.renderer, [])}
      ></vaadin-notification>
      <!-- end::snippet[] -->
    `;
  }

  renderer: NotificationLitRenderer = () => html`
    <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
      <div>Failed to generate report</div>
      <vaadin-button theme="tertiary-inline" @click="${this.close}" aria-label="Close">
        <vaadin-icon icon="lumo:cross"></vaadin-icon>
      </vaadin-button>
    </vaadin-horizontal-layout>
  `;

  private open() {
    this.notificationOpened = true;
  }

  private close() {
    this.notificationOpened = false;
  }
}

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

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

The built-in error message feature, included with input field components, should be used for field-specific input validation errors.

Primary

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

Open in a
new tab

Source code

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

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() {
        // tag::snippet[]
        // When creating a notification using the `show` static method,
        // the duration is 5-sec by default.
        Notification notification = Notification
                .show("New project plan available");
        notification.addThemeVariants(NotificationVariant.LUMO_PRIMARY);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-primary.tsximport React from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  // tag::snippet[]
  const notification = Notification.show('New project plan available', {
    position: 'middle',
    duration: 0,
    theme: 'primary',
  });
  // end::snippet[]

  return <></>;
}

notification-primary.tsimport '@vaadin/button';
import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-primary')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('New project plan available', {
      position: 'middle',
      duration: 0,
      theme: 'primary',
    });
    // end::snippet[]
  }
}

Contrast

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

Open in a
new tab

Source code

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

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() {
        // tag::snippet[]
        // When creating a notification using the `show` static method,
        // the duration is 5-sec by default.
        Notification notification = Notification.show("5 tasks deleted");
        notification.addThemeVariants(NotificationVariant.LUMO_CONTRAST);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-contrast.tsximport React from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  // tag::snippet[]
  const notification = Notification.show('5 tasks deleted', {
    position: 'middle',
    duration: 0,
    theme: 'contrast',
  });
  // end::snippet[]

  return <></>;
}

notification-contrast.tsimport '@vaadin/button';
import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-contrast')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('5 tasks deleted', {
      position: 'middle',
      duration: 0,
      theme: 'contrast',
    });
    // end::snippet[]
  }
}

Duration

By default, notifications stay on-screen for five seconds. The duration can be set — in milliseconds — and should be done so based on the content and its importance:

Use short durations for notifications that contain short text, are of lesser importance (e.g., operations that finished without errors), and have no interactive elements.
Use longer durations for notifications that contain longer text, are of higher importance (e.g., errors), and have interactive elements (e.g., links or "undo" actions).

A duration of at least five seconds (i.e., 5000 milliseconds) is recommended — this is why it’s the default — to ensure that the user has a chance to read and understand the notification.

Persistent Notifications

Setting the duration to 0 milliseconds disables auto-closing. It keeps the notification visible until it’s 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, or allows the user to take appropriate action. Less-important notifications shouldn’t 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.html.Div;
import com.vaadin.flow.component.button.Button;
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(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-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;
}
notification-position.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { Notification, type NotificationPosition } from '@vaadin/react-components/Notification.js';

function Example() {
  const show = (position: NotificationPosition) => {
    Notification.show(position, { position });
  };

  return (
    <div className="notification-position-example">
      {/* tag::snippet[] */}
      <Button onClick={() => show('top-stretch')}>top-stretch</Button>
      <Button onClick={() => show('top-start')}>top-start</Button>
      <Button onClick={() => show('top-center')}>top-center</Button>
      <Button onClick={() => show('top-end')}>top-end</Button>
      <Button onClick={() => show('middle')}>middle</Button>
      <Button onClick={() => show('bottom-start')}>bottom-start</Button>
      <Button onClick={() => show('bottom-center')}>bottom-center</Button>
      <Button onClick={() => show('bottom-end')}>bottom-end</Button>
      <Button onClick={() => show('bottom-stretch')}>bottom-stretch</Button>
      {/* end::snippet[] */}
    </div>
  );
}

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;
}
notification-position.tsimport '@vaadin/button';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { NotificationPosition } from '@vaadin/notification';
import { Notification } from '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';

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

  constructor() {
    super();
    this.classList.add('notification-position-example');
  }

  // tag::snippet[]
  protected override render() {
    return html`
      <vaadin-button @click="${this.show}">top-stretch</vaadin-button>
      <vaadin-button @click="${this.show}">top-start</vaadin-button>
      <vaadin-button @click="${this.show}">top-center</vaadin-button>
      <vaadin-button @click="${this.show}">top-end</vaadin-button>
      <vaadin-button @click="${this.show}">middle</vaadin-button>
      <vaadin-button @click="${this.show}">bottom-start</vaadin-button>
      <vaadin-button @click="${this.show}">bottom-center</vaadin-button>
      <vaadin-button @click="${this.show}">bottom-end</vaadin-button>
      <vaadin-button @click="${this.show}">bottom-stretch</vaadin-button>
    `;
  }

  show(event: MouseEvent) {
    // Use the button label as the location
    const position = (event.target as HTMLElement).textContent as NotificationPosition;

    Notification.show(position, { position });
  }

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

Top End or Bottom Start are recommended for most notifications. They’re unobtrusive, but still noticeable. Middle is the most disruptive position, and should be used only for important notifications, such as errors. Bottom End is the least obtrusive position, but can go unnoticed. Stretch notifications, which span the full width of the viewport, are disruptive, and should be reserved for important notifications whose content requires more space.

Applications with a notification button, or a 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.

Stacking

Multiple simultaneously displayed notifications are stacked vertically. The ordering of them, though, depends 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 one-third of the viewport. In small viewports, the card always consumes the entire width of the viewport.

Interactive Elements

Notifications can contain interactive content (e.g., 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 opportunity 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

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

import com.vaadin.flow.component.html.Div;
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.icon.Icon;
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.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;


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

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

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

        add(button);
        show();
    }

    private Notification show() {
        // tag::snippet[]
        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();
        // end::snippet[]

        notification.setPosition(Notification.Position.MIDDLE);

        return notification;
    }

    public class RetryButton extends Button {
        public RetryButton() {
            super("Retry");
            addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
            getElement().getStyle().set("margin-left", "var(--lumo-space-xl)");
            addClickListener(e -> findAncestor(Notification.class).close());
        }
    }

    public class CloseButton extends Button {
        public CloseButton() {
            super(new Icon("lumo", "cross"));
            addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
            setAriaLabel("Close");
            addClickListener(e -> findAncestor(Notification.class).close());
        }
    }

}
notification-retry.tsximport '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const notificationOpened = useSignal(true);

  const open = () => {
    notificationOpened.value = true;
  };

  const close = () => {
    notificationOpened.value = false;
  };

  return (
    <>
      <Button disabled={notificationOpened.value} onClick={open}>
        Show notification
      </Button>

      {/* tag::snippet[] */}
      {/* The duration is set to 0-sec to prevent the notification from auto-close. */}
      <Notification
        theme="error"
        duration={0}
        position="middle"
        opened={notificationOpened.value}
        onOpenedChanged={(e) => {
          notificationOpened.value = e.detail.value;
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <div>Failed to generate report</div>
          <Button
            theme="tertiary-inline"
            style={{ marginLeft: 'var(--lumo-space-xl)' }}
            onClick={close}
          >
            Retry
          </Button>

          <Button theme="tertiary-inline icon" onClick={close} aria-label="Close">
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>
      {/* end::snippet[] */}
    </>
  );
}

notification-retry.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { NotificationOpenedChangedEvent } from '@vaadin/notification';
import type { NotificationLitRenderer } from '@vaadin/notification/lit.js';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-retry')
export class Example extends LitElement {
  @state()
  private notificationOpened = true;

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

  protected override render() {
    return html`
      <vaadin-button .disabled="${this.notificationOpened}" @click="${this.open}">
        Show notification
      </vaadin-button>

      <!-- tag::snippet[] -->
      <!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
      <vaadin-notification
        theme="error"
        duration="0"
        position="middle"
        .opened="${this.notificationOpened}"
        @opened-changed="${(e: NotificationOpenedChangedEvent) => {
          this.notificationOpened = e.detail.value;
        }}"
        ${notificationRenderer(this.renderer, [])}
      ></vaadin-notification>
      <!-- end::snippet[] -->
    `;
  }

  renderer: NotificationLitRenderer = () => html`
    <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);"
        @click="${this.close}"
      >
        Retry
      </vaadin-button>
      <vaadin-button theme="tertiary-inline icon" @click="${this.close}" aria-label="Close">
        <vaadin-icon icon="lumo:cross"></vaadin-icon>
      </vaadin-button>
    </vaadin-horizontal-layout>
  `;

  private open() {
    this.notificationOpened = true;
  }

  private close() {
    this.notificationOpened = false;
  }
}

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

Open in a
new tab

Source code

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

import com.vaadin.flow.component.html.Div;
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.icon.Icon;
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.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;


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

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

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

        add(button);
        show();
    }

    public Notification show() {
        // tag::snippet[]
        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();
        // end::snippet[]

        notification.setPosition(Notification.Position.MIDDLE);

        return notification;
    }

    public class UndoButton extends Button {
        public UndoButton() {
            super("Undo");
            addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
            getElement().getStyle().set("margin-left", "var(--lumo-space-xl)");
        }
    }

    public class CloseButton extends Button {
        public CloseButton() {
            super(new Icon("lumo", "cross"));
            addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
            setAriaLabel("Close");
            addClickListener(e -> findAncestor(Notification.class).close());
        }
    }

}
notification-undo.tsximport '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const notificationOpened = useSignal(true);

  function open() {
    notificationOpened.value = true;
  }

  function close() {
    notificationOpened.value = false;
  }

  return (
    <>
      <Button disabled={notificationOpened.value} onClick={open}>
        Show notification
      </Button>

      {/* tag::snippet[] */}
      <Notification
        theme="contrast"
        duration={10000}
        position="middle"
        opened={notificationOpened.value}
        onOpenedChanged={(event) => {
          notificationOpened.value = event.detail.value;
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <div>5 tasks deleted</div>
          <Button
            theme="tertiary-inline"
            style={{ marginLeft: 'var(--lumo-space-xl)' }}
            onClick={close}
          >
            Undo
          </Button>

          <Button theme="tertiary-inline" aria-label="Close" onClick={close}>
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>
      {/* end::snippet[] */}
    </>
  );
}

notification-undo.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { NotificationOpenedChangedEvent } from '@vaadin/notification';
import type { NotificationLitRenderer } from '@vaadin/notification/lit.js';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-undo')
export class Example extends LitElement {
  @state()
  private notificationOpened = true;

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

  protected override render() {
    return html`
      <vaadin-button .disabled="${this.notificationOpened}" @click="${this.open}">
        Show notification
      </vaadin-button>

      <!-- tag::snippet[] -->
      <vaadin-notification
        theme="contrast"
        duration="10000"
        position="middle"
        .opened="${this.notificationOpened}"
        @opened-changed="${(e: NotificationOpenedChangedEvent) => {
          this.notificationOpened = e.detail.value;
        }}"
        ${notificationRenderer(this.renderer, [])}
      ></vaadin-notification>
      <!-- end::snippet[] -->
    `;
  }

  renderer: NotificationLitRenderer = () => html`
    <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);"
        @click="${this.close}"
      >
        Undo
      </vaadin-button>
      <vaadin-button theme="tertiary-inline" aria-label="Close" @click="${this.close}">
        <vaadin-icon icon="lumo:cross"></vaadin-icon>
      </vaadin-button>
    </vaadin-horizontal-layout>
  `;

  private open() {
    this.notificationOpened = true;
  }

  private close() {
    this.notificationOpened = false;
  }
}

Notifications can also contain links to relevant information.

Open in a
new tab

Source code

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

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Anchor;
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.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;

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

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

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

        add(button);
        show();
    }

    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.setAriaLabel("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;
    }

}
notification-link.tsximport '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const notificationOpened = useSignal(true);

  const open = () => {
    notificationOpened.value = true;
  };

  const close = () => {
    notificationOpened.value = false;
  };

  return (
    <>
      <Button disabled={notificationOpened.value} onClick={open}>
        Show notification
      </Button>

      {/* tag::snippet[] */}
      {/* The duration is set to 0-sec to prevent the notification from auto-close. */}
      <Notification
        duration={0}
        position="middle"
        opened={notificationOpened.value}
        onOpenedChanged={({ detail: { value } }) => {
          notificationOpened.value = value;
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <div>
            Jason Bailey mentioned you in <a href="#">Project Q4</a>
          </div>

          <Button theme="tertiary-inline" aria-label="Close" onClick={close}>
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>
      {/* end::snippet[] */}
    </>
  );
}

notification-link.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { NotificationOpenedChangedEvent } from '@vaadin/notification';
import type { NotificationLitRenderer } from '@vaadin/notification/lit.js';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-link')
export class Example extends LitElement {
  @state()
  private notificationOpened = true;

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

  protected override render() {
    return html`
      <vaadin-button .disabled="${this.notificationOpened}" @click="${this.open}">
        Show notification
      </vaadin-button>

      <!-- tag::snippet[] -->
      <!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
      <vaadin-notification
        duration="0"
        position="middle"
        .opened="${this.notificationOpened}"
        @opened-changed="${(e: NotificationOpenedChangedEvent) => {
          this.notificationOpened = e.detail.value;
        }}"
        ${notificationRenderer(this.renderer, [])}
      ></vaadin-notification>
      <!-- end::snippet[] -->
    `;
  }

  renderer: NotificationLitRenderer = () => html`
    <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" aria-label="Close" @click="${this.close}">
        <vaadin-icon icon="lumo:cross"></vaadin-icon>
      </vaadin-button>
    </vaadin-horizontal-layout>
  `;


  private open() {
    this.notificationOpened = true;
  }

  private close() {
    this.notificationOpened = false;
  }
}

Keyboard-Accessible

Make sure 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 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.

Open in a
new tab

Source code

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

import com.vaadin.flow.component.*;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
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.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.router.Route;


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

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

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

        add(button);
        show();
    }

    // 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"));

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

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

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

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

    public class CloseButtonWithShortcutHint extends Button {

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


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

}
notification-keyboard-a11y.tsximport React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const notificationOpened = useSignal(true);
  const isMac = /Macintosh|MacIntel|MacPPC|Mac68K/.test(window.navigator.platform);

  const open = () => {
    notificationOpened.value = true;
  };

  const close = () => {
    notificationOpened.value = false;
  };

  // tag::snippet[]
  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (notificationOpened.value && (event.metaKey || event.ctrlKey) && event.key === 'z') {
        event.preventDefault();
        close();
      }
    };

    document.addEventListener('keydown', onKeyDown);

    return () => {
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [notificationOpened.value]);

  return (
    <>
      <Button disabled={notificationOpened.value} onClick={open}>
        Show notification
      </Button>

      <Notification
        theme="contrast"
        duration={10000}
        position="middle"
        opened={notificationOpened.value}
        onOpenedChanged={(e) => {
          notificationOpened.value = e.detail.value;
        }}
      >
        <HorizontalLayout style={{ alignItems: 'center' }}>
          <div>5 tasks deleted</div>
          <Button style={{ marginLeft: 'var(--lumo-space-xl)' }} theme="primary" onClick={close}>
            Undo
            {isMac ? '⌘' : 'Ctrl-'}Z
          </Button>
        </HorizontalLayout>
      </Notification>
    </>
  );
  // end::snippet[]
}

notification-keyboard-a11y.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/notification';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { NotificationOpenedChangedEvent } from '@vaadin/notification';
import type { NotificationLitRenderer } from '@vaadin/notification/lit.js';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-keyboard-a11y')
export class Example extends LitElement {
  @state()
  private notificationOpened = true;

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

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

  // tag::snippet[]
  protected override render() {
    return html`
      <!-- end::snippet[] -->
      <vaadin-button .disabled="${this.notificationOpened}" @click="${this.open}">
        Show notification
      </vaadin-button>

      <!-- tag::snippet[] -->
      <vaadin-notification
        theme="contrast"
        duration="10000"
        position="middle"
        .opened="${this.notificationOpened}"
        @opened-changed="${(e: NotificationOpenedChangedEvent) => {
          this.notificationOpened = e.detail.value;
        }}"
        ${notificationRenderer(this.renderer, [])}
      ></vaadin-notification>
    `;
  }

  // end::snippet[]

  // tag::renderer[]
  renderer: NotificationLitRenderer = () => html`
    <vaadin-horizontal-layout style="align-items: center;">
      <div>5 tasks deleted</div>
      <vaadin-button
        style="margin-left: var(--lumo-space-xl);"
        theme="primary"
        @click="${this.close}"
      >
        Undo
        <!-- Ideally, this should be hidden if the
                 device does not have a physical keyboard -->
        ${this.isMac ? '⌘' : 'Ctrl-'}Z
      </vaadin-button>
    </vaadin-horizontal-layout>
  `;

  // end::renderer[]

  // tag::key-down[]
  connectedCallback() {
    super.connectedCallback();

    document.addEventListener('keydown', this.onKeyDown);
  }

  disconnectedCallback() {
    super.disconnectedCallback();

    document.removeEventListener('keydown', this.onKeyDown);
  }

  onKeyDown = (event: KeyboardEvent) => {
    if (this.notificationOpened && (event.metaKey || event.ctrlKey) && event.key === 'z') {
      // Handle your custom undo logic here
      // Avoid triggering the native undo action
      event.preventDefault();
      this.close();
    }
  };
  // end::key-down[]

  private open() {
    this.notificationOpened = true;
  }

  private close() {
    this.notificationOpened = false;
  }
}

Icons & Other Rich Formatting

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.

Open in a
new tab

Source code

notification-rich-preview.tsimport '@vaadin/avatar';
import '@vaadin/button';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

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

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

      <vaadin-notification-card slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center">
          <vaadin-icon
            icon="vaadin:check-circle"
            style="color: var(--lumo-success-color)"
          ></vaadin-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">
            <vaadin-icon icon="lumo:cross"></vaadin-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.html.Anchor;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.button.Button;
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.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

import java.util.function.Supplier;

import static com.vaadin.flow.component.button.ButtonVariant.*;

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

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

}
notification-rich.tsximport '@vaadin/icons';
import React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Avatar } from '@vaadin/react-components/Avatar.js';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  const openedNotifications = useSignal<number[]>([]);

  function open(index: number) {
    openedNotifications.value = [...openedNotifications.value, index];
  }

  function close(index: number) {
    openedNotifications.value = openedNotifications.value.filter((n) => n !== index);
  }

  return (
    <>
      {/* tag::snippet[] */}
      <Notification
        theme="success"
        position="middle"
        opened={openedNotifications.value.includes(0)}
        onOpenedChanged={(e) => {
          if (!e.detail.value) {
            close(0);
          }
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <Icon icon="vaadin:check-circle" />
          <div>Application submitted!</div>
          <Button style={{ margin: '0 0 0 var(--lumo-space-l)' }} onClick={() => close(0)}>
            View
          </Button>
          <Button theme="tertiary-inline" onClick={() => close(0)} aria-label="Close">
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>

      <Notification
        theme="error"
        position="middle"
        opened={openedNotifications.value.includes(1)}
        onOpenedChanged={(e) => {
          if (!e.detail.value) {
            close(1);
          }
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <Icon icon="vaadin:warning" />
          <div>Failed to generate report</div>
          <Button style={{ margin: '0 0 0 var(--lumo-space-l)' }} onClick={() => close(1)}>
            Retry
          </Button>
          <Button theme="tertiary-inline" onClick={() => close(1)} aria-label="Close">
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>

      <Notification
        position="middle"
        opened={openedNotifications.value.includes(2)}
        onOpenedChanged={(e) => {
          if (!e.detail.value) {
            close(2);
          }
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <Avatar name="Jason Bailey" />
          <div>
            <b>Jason Bailey</b> mentioned you in <a href="#">Project Q4</a>
          </div>
          <Button theme="tertiary-inline" onClick={() => close(2)} aria-label="Close">
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>

      <Notification
        position="middle"
        opened={openedNotifications.value.includes(3)}
        onOpenedChanged={(e) => {
          if (!e.detail.value) {
            close(3);
          }
        }}
      >
        <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
          <Icon icon="vaadin:check-circle" style={{ color: 'var(--lumo-success-color)' }} />
          <div>
            <b style={{ color: 'var(--lumo-success-text-color)' }}>Upload successful</b>
            <div
              style={{
                fontSize: '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>
          <Button theme="tertiary-inline" onClick={() => close(3)} aria-label="Close">
            <Icon icon="lumo:cross" />
          </Button>
        </HorizontalLayout>
      </Notification>
      {/* end::snippet[] */}

      <HorizontalLayout theme="spacing" style={{ justifyContent: 'center' }}>
        <Button theme="success primary" onClick={() => open(0)}>
          Try it
        </Button>

        <Button theme="error primary" onClick={() => open(1)}>
          Try it
        </Button>

        <Button theme="contrast" onClick={() => open(2)}>
          Try it
        </Button>

        <Button theme="success" onClick={() => open(3)}>
          Try it
        </Button>
      </HorizontalLayout>
    </>
  );
}

notification-rich.tsimport '@vaadin/avatar';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { Notification } from '@vaadin/notification';
import { notificationRenderer } from '@vaadin/notification/lit.js';
import { applyTheme } from 'Frontend/generated/theme';

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

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-notification
        ${notificationRenderer(
          (notification) => html`
            <vaadin-horizontal-layout theme="spacing" style="align-items: center">
              <vaadin-icon icon="vaadin:check-circle"></vaadin-icon>
              <div>Application submitted!</div>
              <vaadin-button
                style="margin: 0 0 0 var(--lumo-space-l)"
                @click="${() => notification.close()}"
              >
                View
              </vaadin-button>
              <vaadin-button
                theme="tertiary-inline"
                @click="${() => notification.close()}"
                aria-label="Close"
              >
                <vaadin-icon icon="lumo:cross"></vaadin-icon>
              </vaadin-button>
            </vaadin-horizontal-layout>
          `,
          []
        )}
        theme="success"
        position="middle"
      ></vaadin-notification>

      <vaadin-notification
        ${notificationRenderer(
          (notification) => html`
            <vaadin-horizontal-layout theme="spacing" style="align-items: center">
              <vaadin-icon icon="vaadin:warning"></vaadin-icon>
              <div>Failed to generate report</div>
              <vaadin-button
                style="margin: 0 0 0 var(--lumo-space-l)"
                @click="${() => notification.close()}"
              >
                Retry
              </vaadin-button>
              <vaadin-button
                theme="tertiary-inline"
                @click="${() => notification.close()}"
                aria-label="Close"
              >
                <vaadin-icon icon="lumo:cross"></vaadin-icon>
              </vaadin-button>
            </vaadin-horizontal-layout>
          `,
          []
        )}
        theme="error"
        position="middle"
      ></vaadin-notification>

      <vaadin-notification
        ${notificationRenderer(
          (notification) => html`
            <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"
                @click="${() => notification.close()}"
                aria-label="Close"
              >
                <vaadin-icon icon="lumo:cross"></vaadin-icon>
              </vaadin-button>
            </vaadin-horizontal-layout>
          `,
          []
        )}
        position="middle"
      ></vaadin-notification>

      <vaadin-notification
        ${notificationRenderer(
          (notification) => html`
            <vaadin-horizontal-layout theme="spacing" style="align-items: center">
              <vaadin-icon
                icon="vaadin:check-circle"
                style="color: var(--lumo-success-color)"
              ></vaadin-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"
                @click="${() => notification.close()}"
                aria-label="Close"
              >
                <vaadin-icon icon="lumo:cross"></vaadin-icon>
              </vaadin-button>
            </vaadin-horizontal-layout>
          `,
          []
        )}
        position="middle"
      ></vaadin-notification>
      <!-- end::snippet[] -->
      <vaadin-horizontal-layout theme="spacing" style="justify-content: center">
        <vaadin-button @click="${this.open}" data-which="1" theme="success primary">
          Try it
        </vaadin-button>
        <vaadin-button @click="${this.open}" data-which="2" theme="error primary">
          Try it
        </vaadin-button>
        <vaadin-button @click="${this.open}" data-which="3" theme="contrast">Try it</vaadin-button>
        <vaadin-button @click="${this.open}" data-which="4" theme="success">Try it</vaadin-button>
      </vaadin-horizontal-layout>
    `;
  }

  open(event: MouseEvent) {
    const target = event.target as HTMLElement;
    const notification = this.renderRoot.querySelector<Notification>(
      `vaadin-notification:nth-child(${target.dataset.which})`
    );
    notification?.open();
  }
}

Static Helper

For simple, one-off notifications, it’s convenient to use the static show() helper method. The helper manages the notification’s lifecycle, and adds and removes it from the DOM, automatically.

Open in a
new tab

Source code

NotificationStaticHelper.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-static-helper")
public class NotificationStaticHelper extends Div {

    public NotificationStaticHelper() {
        Button button = new Button("Show text notification");
        button.addClickListener(clickEvent -> {
            // tag::snippet[]
            // Show a simple text-based notification
            Notification notification = Notification
                    .show("Financial report generated");
            notification.setPosition(Notification.Position.MIDDLE);
            // end::snippet[]
        });

        add(button);
    }

}
notification-static-helper.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  function handleTextNotification() {
    // tag::snippet[]
    // Show a simple text-based notification
    Notification.show('Financial report generated', {
      position: 'middle',
    });
    // end::snippet[]
  }

  return <Button onClick={handleTextNotification}>Show text notification</Button>;
}

notification-static-helper.tsimport '@vaadin/button';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';

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

  handleTextNotification() {
    // tag::snippet[]
    // Show a simple text-based notification
    Notification.show('Financial report generated', {
      position: 'middle',
    });
    // end::snippet[]
  }

  handleLitTemplateNotification() {
    // tag::snippet[]
    // Show a notification with markup using a Lit template
    Notification.show(
      html`
        <b>@John:</b>
        &nbsp;
        <span>
          How about lunch at
          <span style="color: var(--lumo-primary-text-color)">12:30pm</span>?
        </span>
      `,
      {
        position: 'middle',
      }
    );
    // end::snippet[]
  }

  protected override render() {
    return html`
      <vaadin-button @click="${this.handleTextNotification}">
        Show text notification
      </vaadin-button>
      <vaadin-button @click="${this.handleLitTemplateNotification}">
        Show notification with markup
      </vaadin-button>
    `;
  }
}

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 might otherwise go unnoticed by the user.

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

Open in a
new tab

Source code

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

import com.vaadin.demo.DemoExporter;
import com.vaadin.flow.component.button.Button;
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.dom.Element;
import com.vaadin.flow.dom.Style;
import com.vaadin.flow.router.Route;

import java.util.Arrays;

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

    public NotificationPopup() {
        // tag::snippet[]
        var bellBtn = new MessagesButton();
        bellBtn.setUnreadMessages(4);

        ContextMenu menu = new ContextMenu();
        menu.setOpenOnClick(true);
        menu.setTarget(bellBtn);
        menu.addItem("This is ContextMenu");
        menu.addItem("Consider Using");
        menu.addItem("ContextMenu");
        menu.addItem("Instead of Notifications");
        // end::snippet[]

        add(bellBtn);
    }


    public class MessagesButton extends Button {

        private final Element numberOfNotifications;

        public MessagesButton() {
            super(VaadinIcon.BELL_O.create());
            numberOfNotifications = new Element("span");
            numberOfNotifications.getStyle()
                    .setPosition(Style.Position.ABSOLUTE)
                    .setTransform("translate(-40%, -85%)");
            numberOfNotifications.getThemeList().addAll(Arrays.asList("badge",
                    "error", "primary", "small", "pill"));
        }

        public void setUnreadMessages(int unread) {
            numberOfNotifications.setText(unread + "");
            if (unread > 0 && numberOfNotifications.getParent() == null) {
                getElement().appendChild(numberOfNotifications);
            } else if (numberOfNotifications.getNode().isAttached()) {
                numberOfNotifications.removeFromParent();
            }
        }

    }

}
notification-popup.tsximport '@vaadin/icons';
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { ContextMenu } from '@vaadin/react-components/ContextMenu.js';
import { Icon } from '@vaadin/react-components/Icon.js';

function Example() {
  return (
    // tag::snippet[]
    <ContextMenu
      openOn="click"
      renderer={() => <div style={{ padding: 'var(--lumo-space-l)' }}>Show notifications here</div>}
    >
      <Button aria-label="notifications" theme="tertiary">
        <Icon icon="vaadin:bell-o" />
        <span style={{ position: 'absolute', transform: 'translate(-40%, -30%)' }}>
          <span {...{ theme: 'badge error primary small pill' }}>4</span>
        </span>
      </Button>
    </ContextMenu>
    // end::snippet[]
  );
}

notification-popup.tsimport '@vaadin/button';
import '@vaadin/context-menu';
import '@vaadin/icon';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { contextMenuRenderer } from '@vaadin/context-menu/lit.js';
import { badge } from '@vaadin/vaadin-lumo-styles/badge.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('notification-popup')
export class Example2 extends LitElement {
  static override styles = [
    badge,
    css`
      vaadin-context-menu {
        /* Wrap the click target around the button */
        display: inline-block;
      }

      span[theme~='badge'] {
        position: absolute;
        transform: translate(-40%, -30%);
      }
    `,
  ];

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

  // tag::snippet[]
  protected override render() {
    return html`
      <vaadin-context-menu
        open-on="click"
        ${contextMenuRenderer(
          () => html`<div style="padding: var(--lumo-space-l);">Show notifications here</div>`,
          []
        )}
      >
        <vaadin-button aria-label="notifications" theme="tertiary">
          <vaadin-icon icon="vaadin:bell-o"></vaadin-icon>
          <span theme="badge error primary small pill">4</span>
        </vaadin-button>
      </vaadin-context-menu>
    `;
  }
  // end::snippet[]
}

Limit Content Length

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.

Open in a
new tab

Show a preview of longer content, and link to the full details.

Source code

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

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

  protected override 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">
          <vaadin-icon icon="lumo:cross"></vaadin-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 '@vaadin/button';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { applyTheme } from 'Frontend/generated/theme';

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

  protected override 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">
          <vaadin-icon icon="lumo:cross"></vaadin-icon>
        </vaadin-button>
      </vaadin-notification-card>
    `;
  }
}
notification-content-length-dont.ts

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

Component

Usage Recommendation

Dialog

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

77E15AD0-F634-4D81-8C4D-FAC7A21D889B

Docs

Docs

Notification

Theme Variants

Success

Warning

Error

Primary

Contrast

Duration

Persistent Notifications

Position

Stacking

Size

Interactive Elements

Keyboard-Accessible

Icons & Other Rich Formatting

Static Helper

Best Practices

Use Sparingly

Limit Content Length

Docs

Theme Variants

Success

Warning

Error

Primary

Contrast

Duration

Persistent Notifications

Position

Stacking

Size

Interactive Elements

Keyboard-Accessible

Icons & Other Rich Formatting

Static Helper

Best Practices

Use Sparingly

Limit Content Length

Related Components