Docs

Docs

Notification

Notification is used to provide feedback to the user.

Notification communicates information about activities, processes, and events in the application.

const [notificationOpened, setNotificationOpened] = useState(false);

const handleClick = () => {
  setNotificationOpened(true);
  const notification = Notification.show("Financial report generated", {
    position: "middle",
  });
  const handleOpenChanged = (e: NotificationOpenedChangedEvent) => {
    if (!e.detail.value) {
      setNotificationOpened(false);
      notification.removeEventListener("opened-changed", handleOpenChanged);
    }
  };
  notification.addEventListener("opened-changed", handleOpenChanged);
};

return (
  <Button onClick={handleClick} disabled={notificationOpened}>
    Try it
  </Button>
);

Theme Variants

The success theme variant can be used to display success messages, such as when a task or operation is completed.

The error theme variant can be used to display alerts, failures, or warnings.

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

The contrast variant improves legibility and distinguishes the notification from the rest of the UI.

const themes = ["success", "error", "primary", "contrast"];

const handleClick = (e: MouseEvent) => {
  const theme = e.currentTarget.textContent!;
  const notification = Notification.show(theme);
  notification.setAttribute("theme", theme);
};

return (
  <>
    {themes.map((theme) => (
      <Button key={theme} onClick={handleClick}>
        {theme}
      </Button>
    ))}
  </>
);
Important
 You can find more information in the corresponding article on vaadin.com.