Notification
Show dynamic notifications and alerts to user, part of notifications system
Import
Source
Docs
Package
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
Default notification
This is default notification with title and body
Teal notification
This is teal notification with icon
Bummer! Notification without title
Uploading data to the server
Please wait until data is uploaded, you cannot close this notification yet
Colors
You can choose any color defined in theme:
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
Color
Radius
xs
sm
md
lg
xl
Accessibility
To support screen readers set close button aria-label or title with closeButtonProps
: