Notifications

setup

npm install @mantine/notifications

import "@mantine/notifications/styles.css" // here

<MantineProvider>
    <Notifications />
    {/* Your app here */}
</MantineProvider>

import { notifications } from "@mantine/notifications"

create notification

we create a notification. We may set:

• an id, if we intend to update this notification later on
• loading to display a spinner
• autoClose to false, to keep the notification on-screen until dismissed. By default, the notification closes automatically. We may set the delay by providing a duration in milliseconds.
• position to set it somewhere else than bottom-right.

message is required, while title is optional.

notifications.show({
    id: task.id,
    color: "white",
    title: "Generating...",
    message: task.prompt,
    autoClose: false,
    loading: true,
    position: "top-right",
    radius: "xl",
    withCloseButton: false,
})

update notification with id

If the update indicates completion, we may show a completion icon, provide a completion text and plan for an auto-close.

notifications.update({
    id: task.id,
    color: "gray",
    title: "Image successfully created",
    message: task.prompt,
    icon: <IconCheck size={18} />,
    loading: false,
    autoClose: 2500,
    radius: "xl",
})