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
You can use icons from any react icons library, for example:
- radix icons (used in mantine packages)
- feather
- react-icons
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
<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><Notificationloadingtitle="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:
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
<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' }} />
Built by Vitaly Rtishchev and these awesome people