---
title: Notification
description: Notification
element: vaadin-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.

```html
<vaadin-notification id="notification"></vaadin-notification>
```
```js
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](https://vaadin.com/docs/latest/styling/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](#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](#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:

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

See the individual documentation for:
- [`assertive`](/elements/vaadin-notification#assertive)
- [`position`](/elements/vaadin-notification#position)
- [`duration`](/elements/vaadin-notification#duration)

## Events

### closed

**Type:** [NotificationClosedEvent](#notificationclosedevent)

Fired when the notification is closed.

### opened-changed

**Type:** [NotificationOpenedChangedEvent](#notificationopenedchangedevent)

Fired when the `opened` property changes.

## Types

### NotificationClosedEvent

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

### NotificationOpenedChangedEvent

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

### NotificationPosition

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

### NotificationRenderer

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