"notification-view" custom element:

This web component is meant to display desktop-liked notifications for a custom period. Add a "" element to your HTML, and whenever you need to push a notification use:

e.notify('This is a test message', 'info', 3000);

This component supports for types of notifications: "success", "error", "warning", and "info". The last argument is the timeout to auto-hide the notification.

Preview

<notification-view></notification-view>

The default timeout is 10 seconds. The user also can manually close the notification by pressing the "close" button.

Configuration

You can configure the color and background color of the notifications using the following CSS variables:

notification-view {
  --success-fg: #fff;
  --success-bg: #27a043;

  --info-fg: #fff;
  --info-bg: #1b99af;

  --warning-fg: #fff;
  --warning-bg: #e18a12;

  --error-fg: #fff;
  --error-bg: #d13342;
}

Also, you can change the gap between the elements of the notification using the following CSS variable:

notification-view {
  --gap: 10px;
}