Notification

Show dynamic notifications and alerts to user, part of notifications system
Import

Usage

Notification is a base component for notification system. Build your own or use @mantine/notifications package.

Notification component has 3 variants:

  • default – with colored line on the left
  • icon – line is replaced with icon
  • loading – icon or line are replaced with Loader
import { Notification } from '@mantine/core';
import { Check, X } from 'tabler-icons-react';
function Demo() {
return (
<>
<Notification title="Default notification">
This is default notification with title and body
</Notification>
<Notification icon={<Check size={18} />} color="teal" title="Teal notification">
This is teal notification with icon
</Notification>
<Notification icon={<X size={18} />} color="red">
Bummer! Notification without title
</Notification>
<Notification
loading
title="Uploading data to the server"
disallowClose
>
Please wait until data is uploaded, you cannot close this notification yet
</Notification>
</>
);
}

Colors

You can choose any color defined in theme:

Color
Radius
xs
sm
md
lg
xl
import { Notification } from '@mantine/core';
import { Check } from 'tabler-icons-react';
function Demo() {
return (
<>
<Notification title="We notify you that">
You are now obligated to give a star to Mantine project on GitHub
</Notification>
<Notification icon={<Check size={20} />} title="We notify you that">
You are now obligated to give a star to Mantine project on GitHub
</Notification>
</>
);
}

Accessibility

To support screen readers set close button aria-label or title with closeButtonProps:

<Notification closeButtonProps={{ 'aria-label': 'Hide notification' }} />
<Notification closeButtonProps={{ title: 'Hide notification' }} />