Mantine Notifications

Mantine notifications system

Source

View source code

Docs

Edit this page

Package

@mantine/notifications

License

MIT

Installation

Package depends on @mantine/core and @mantine/hooks.

Install with yarn:

yarn add @mantine/notifications

Install with npm:

npm install @mantine/notifications

Demo

Usage

Add Notifications component anywhere in your application, usually it is placed inside MantineProvider next to your App component:

import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';

function Demo() {
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <Notifications />
      <App />
    </MantineProvider>
  );
}

Then use notifications.show function anywhere in your application:

import { Group, Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() =>
          notifications.show({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
          })
        }
      >
        Show notification
      </Button>
    </Group>
  );
}

Functions

Notifications system is based on custom events, @mantine/notifications package exports the following functions:

notifications.show – adds given notification to notifications list or queue depending on current state and limit
notifications.update – updates notification that was previously added to the state or queue
notifications.hide – removes notification with given id from notifications state and queue
notifications.clean – removes all notifications from notifications state and queue
notifications.cleanQueue – removes all notifications from queue

All functions can be imported from @mantine/notifications package and can be used in any part of your application:

import { notifications } from '@mantine/notifications';

Notification props

Notification state item can have these properties:

id – notification id, it is used to update and remove notification, by default id is randomly generated
withBorder – determines whether notification should have border
withCloseButton – determines whether close button should be visible
onClose – calls when notification is unmounted
onOpen – calls when notification is mounted
autoClose – defines timeout in ms on which notification will be automatically closed, use false to disable auto close
message – required notification body
color, icon, title, radius, className, style, sx, loading – props added to Notification component

All properties except message are optional.

import { IconX } from '@tabler/icons-react';
import { notifications } from '@mantine/notifications';

// Bare minimum – message is required for all notifications
notifications.show({ message: 'Hello' });

// Most used notification props
notifications.show({
  id: 'hello-there',
  withCloseButton: true,
  onClose: () => console.log('unmounted'),
  onOpen: () => console.log('mounted'),
  autoClose: 5000,
  title: "You've been compromised",
  message: 'Leave the building immediately',
  color: 'red',
  icon: <IconX />,
  className: 'my-notification-class',
  style: { backgroundColor: 'red' },
  sx: { backgroundColor: 'red' },
  loading: false,
});

Notifications preview (message prop used as children):

We notify you that

You are now obligated to give a star to Mantine project on GitHub

We notify you that

You are now obligated to give a star to Mantine project on GitHub

With close button

With border

Color

Radius

Title

Children

Customize notification styles

You can use sx, style, className or Styles API classNames, styles props to customize notification styles:

import { Group, Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() =>
          notifications.show({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
            styles: (theme) => ({
              root: {
                backgroundColor: theme.colors.blue[6],
                borderColor: theme.colors.blue[6],

                '&::before': { backgroundColor: theme.white },
              },

              title: { color: theme.white },
              description: { color: theme.white },
              closeButton: {
                color: theme.white,
                '&:hover': { backgroundColor: theme.colors.blue[7] },
              },
            }),
          })
        }
      >
        Show customized notification
      </Button>
    </Group>
  );
}

Notifications container position

Notifications renders notifications container with fixed position inside Portal. Position cannot be changed per notification. Notifications supports the following positions:

top-left
top-right
top-center
bottom-left
bottom-right
bottom-center

import { Notifications } from '@mantine/notifications';

function Demo() {
  return <Notifications position="top-right" zIndex={2077} />;
}

Limit and queue

Notifications uses use-queue hook to manage state. You can limit maximum amount of notifications that can be displayed by setting limit prop on Notifications:

import { Notifications } from '@mantine/notifications';

function Demo() {
  return <Notifications limit={5} />;
}

All notifications added after limit was reached will be added into queue and displayed when notification from current state is closed.

import { Group, Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() => {
          Array(10).fill(0).forEach((_, index) => {
            setTimeout(() => {
              notifications.show({
                title: `Notification ${index + 1}`,
                message: 'Most notifications are added to queue',
              });
            }, 200 * index);
          });
        }}
      >
        Show 10 notifications
      </Button>
    </Group>
  );
}

Remove notifications from state and queue

To remove specific notification from state or queue use notifications.hide function:

import { notifications } from '@mantine/notifications';

notifications.show({ id: 'hello', message: 'Hello!' });
notifications.hide('hello');

Use notifications.cleanQueue function to remove all notifications that are not currently displayed and notifications.clean function to remove all notifications from state and queue:

import { Group, Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() => {
          Array(10)
            .fill(0)
            .forEach((_, index) => {
              notifications.show({
                title: `Notification ${index + 1}`,
                message: 'Most notifications are added to queue',
                autoClose: false,
              });
            });
        }}
      >
        Show 10 notifications
      </Button>

      <Button variant="outline" color="gray" onClick={notifications.cleanQueue}>
        Clean queue
      </Button>

      <Button variant="outline" color="red" onClick={notifications.clean}>
        Clean all
      </Button>
    </Group>
  );
}

Update notification

import { Group, Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { IconCheck } from '@tabler/icons-react';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() => {
          notifications.show({
            id: 'load-data',
            loading: true,
            title: 'Loading your data',
            message: 'Data will be loaded in 3 seconds, you cannot close this yet',
            autoClose: false,
            withCloseButton: false,
          });

          setTimeout(() => {
            notifications.update({
              id: 'load-data',
              color: 'teal',
              title: 'Data was loaded',
              message: 'Notification will close in 2 seconds, you can close this notification now',
              icon: <IconCheck size="1rem" />,
              autoClose: 2000,
            });
          }, 3000);
        }}
      >
        Show update notification
      </Button>
    </Group>
  );
}

Auto close

You can configure auto close timeout with Notifications:

import { Notifications } from '@mantine/notifications';

// All notifications will be closed automatically in 4000ms
function Demo() {
  return <Notifications autoClose={4000} />;
}

Or in notifications.show/notifications.update functions:

import { notifications } from '@mantine/notifications';

notifications.show({
  message: 'I will close in 500ms seconds',
  autoClose: 500,
});

notifications.update({
  id: 'hello',
  message: 'I will never close',
  autoClose: false,
});

notifications.show and notifications.update functions autoClose prop always has higher priority.

import { Group, Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() => notifications.show({ message: 'I will close in 4 seconds' })}
      >
        Notifications Provider timeout
      </Button>

      <Button
        variant="outline"
        onClick={() =>
          notifications.show({
            message: 'I will close in 500ms',
            autoClose: 500,
          })
        }
      >
        Closes in 500ms
      </Button>

      <Button
        variant="outline"
        onClick={() =>
          notifications.show({
            color: 'blue',
            title: 'I will never close',
            message: 'unless you click X',
            autoClose: false,
          })
        }
      >
        Never closes automatically
      </Button>
    </Group>
  );
}

Go back

Navigation progress – @mantine/nprogress

Up next

Prism code highlight – @mantine/prism

Notifications component props

Name	Type	Description
autoClose	number \| false	Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by notifications.show function
containerWidth	string \| number	Notification width, cannot exceed 100%
limit	number	Maximum amount of notifications displayed at a time, other new notifications will be added to queue
notificationMaxHeight	string \| number	Notification max-height, used for transitions
position	"bottom-center" \| "top-center" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	Notifications position
target	string \| HTMLElement	Target element of Portal component
transitionDuration	number	Notification transitions duration, 0 to turn transitions off
zIndex	ZIndex	Notifications container z-index

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter