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
<Notification title="Default notification">
This is default notification with title and body
</Notification>
<Notification icon={<CheckIcon />} color="teal" title="Teal notification">
This is teal notification with icon
</Notification>
<Notification icon={<Cross1Icon />} 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
<Notification title="We notify you that">
You are now obligated to give a star to Mantine project on GitHub
</Notification>
<Notification icon={<CheckIcon />} 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' }} />
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback