Notification | Mantine

Show dynamic notifications and alerts to user, part of notifications system

Notification is a base component for the notification system. Build your own or use the @mantine/notifications package.

When you use @mantine/notifications , notifications can be dismissed by:

You can disable these interactions on the Notifications component with allowDragDismiss={false} and allowScrollDismiss={false} .

See the notifications package documentation for configuration details.

Notification supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.

Component Styles API

Hover over selectors to highlight corresponding elements

To support screen readers, set the close button's aria-label or title with closeButtonProps :

Recommended articles