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
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
CloseButtonProps
To customize CloseButton inside Notification, you can pass CloseButtonProps
.
Accessibility
To support screen readers set close button aria-label or title with closeButtonProps
:
Notification component props
Name | Type | Description |
---|---|---|
children | ReactNode | Notification body, place main text here |
closeButtonProps | Record<string, any> | Props spread to close button |
color | MantineColor | Notification line or icon color |
disallowClose | boolean | Removes close button |
icon | ReactNode | Notification icon, replaces color line |
loading | boolean | Replaces colored line or icon with Loader component |
onClose | () => void | Called when close button is clicked |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Radius from theme.radius, or number to set border-radius in px |
title | ReactNode | Notification title, displayed before body |
Notification component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Notification-root | Root element |
body | .mantine-Notification-body | Notification body wrapper, contains title and description |
loader | .mantine-Notification-loader | Notification loader, controlled by loading prop |
icon | .mantine-Notification-icon | Notification icon on the left, controlled by icon prop |
title | .mantine-Notification-title | Notification title, controlled by title prop |
description | .mantine-Notification-description | Notification description, controlled by children |
closeButton | .mantine-Notification-closeButton | Close button |