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. |