Notification

Description #

<vaadin-notification> is a Web Component providing accessible and customizable notifications (toasts).

Rendering #

The content of the notification can be populated by using the renderer callback function.

The renderer function provides root, notification arguments. Generate DOM content, append it to the root element and control the state of the host element by accessing notification. Before generating new content, users are able to check if there is already content in root for reusing it.

<vaadin-notification id="notification"></vaadin-notification>

const notification = document.querySelector('#notification');
notification.renderer = function(root, notification) {
  root.textContent = "Your work has been saved";
};

Renderer is called on the opening of the notification. DOM generated during the renderer call can be reused in the next renderer call and will be provided with the root argument. On first call it will be empty.

Styling #

<vaadin-notification> uses <vaadin-notification-card> internal themable component as the actual visible notification cards.

The following shadow DOM parts of the <vaadin-notification-card> are available for styling:

Part name	Description
overlay	The notification container
content	The content of the notification

See Styling Components documentation.

Note: the theme attribute value set on <vaadin-notification> is propagated to the internal <vaadin-notification-card>.

Properties #

assertive #

Type: boolean

When true, the notification card has aria-live attribute set to assertive instead of polite. This makes screen readers announce the notification content immediately when it appears.

duration #

Type: number

The duration in milliseconds to show the notification. Set to 0 or a negative number to disable the notification auto-closing.

opened #

Type: boolean

True if the notification is currently displayed.

overlayClass #

Type: string

A space-delimited list of CSS class names to set on the overlay element. This property does not affect other CSS class names set manually via JS.

Note, if the CSS class name was set with this property, clearing it will remove it from the overlay, even if the same class name was also added manually, e.g. by using classList.add() in the renderer function.

position #

Type: NotificationPosition

Alignment of the notification in the viewport Valid values are top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch

See also: NotificationPosition

renderer #

Type: NotificationRenderer | undefined

Custom function for rendering the content of the notification. Receives two arguments:

• root The <vaadin-notification-card> DOM element. Append your content to it.
• notification The reference to the <vaadin-notification> element.

See also: NotificationRenderer

Methods #

close #

Type: () => void

Closes the notification.

open #

Type: () => void

Opens the notification.

requestContentUpdate #

Type: () => void

Requests an update for the content of the notification. While performing the update, it invokes the renderer passed in the renderer property.

It is not guaranteed that the update happens immediately (synchronously) after it is requested.

Static Methods #

show #

Type: (contents: string | TemplateResult, options?: ShowOptions | undefined) => Notification

Shows a notification with the given content. By default, positions the notification at bottom-start and uses a 5 second duration. An options object can be passed to configure the notification. The options object has the following structure:

{
  assertive?: boolean
  position?: string
  duration?: number
  theme?: string
}

See the individual documentation for:

• assertive
• position
• duration

Events #

closed #

Type: NotificationClosedEvent

Fired when the notification is closed.

opened-changed #

Type: NotificationOpenedChangedEvent

Fired when the opened property changes.

Types #

NotificationClosedEvent #

/**
 * Fired when the notification is closed.
 */
export type NotificationClosedEvent = CustomEvent;

NotificationOpenedChangedEvent #

/**
 * Fired when the `opened` property changes.
 */
export type NotificationOpenedChangedEvent = CustomEvent<{ value: boolean }>;

NotificationPosition #

export type NotificationPosition =
  | 'bottom-center'
  | 'bottom-end'
  | 'bottom-start'
  | 'bottom-stretch'
  | 'middle'
  | 'top-center'
  | 'top-end'
  | 'top-start'
  | 'top-stretch';

NotificationRenderer #

export type NotificationRenderer = (root: HTMLElement, notification: Notification) => void;