v3.6.14
Discord
Source code

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
<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' }} />
Go back
Loader – @mantine/core
Up next
Progress – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter