# Install

```shell
npm i @vaadin/notification
```

# Import

```javascript
import '@vaadin/notification';
```

# Variants

## Information

```html
<vaadin-notification position="top-center"></vaadin-notification>
```

```javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Sie verwenden nun die Softwareversion 2.0.</p>`;
document.querySelector('vaadin-notification').duration = 5000;
document.querySelector('vaadin-notification').opened = true;
```

## Success

```html
<vaadin-notification theme="success" position="top-center"></vaadin-notification>
```

```javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Der Datensatz wurde gespeichert.</p>`;
document.querySelector('vaadin-notification').duration = 5000;
document.querySelector('vaadin-notification').opened = true;
```

## Warning

```html
<vaadin-notification theme="warning" position="top-center"></vaadin-notification>
```

```javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Ihr Passwort läuft in 5 Tagen ab.</p>`;
document.querySelector('vaadin-notification').duration = 5000;
document.querySelector('vaadin-notification').opened = true;
```

## Error

```html
<vaadin-notification theme="error" position="top-center"></vaadin-notification>
```

```javascript
document.querySelector('vaadin-notification').renderer = (root, notification, model) => root.innerHtml = `<p>Der Datensatz konnte nicht gespeichert werden.</p>`;
document.querySelector('vaadin-notification').duration = 0;
document.querySelector('vaadin-notification').opened = true;
```