v1.3.1
⌘K
Source codeDiscussReport issue

Notification

Show dynamic notifications and alerts to user, part of notifications system
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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

You can use icons from any react icons library, for example:

<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
<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' }} />