Notification

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

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
import { Notification } from '@mantine/core';
import { IconCheck, IconX } from '@tabler/icons';
function Demo() {
return (
<>
<Notification title="Default notification">
This is default notification with title and body
</Notification>
<Notification icon={<IconCheck size={18} />} color="teal" title="Teal notification">
This is teal notification with icon
</Notification>
<Notification icon={<IconX size={18} />} 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

Color
Radius
xs
sm
md
lg
xl
import { Notification } from '@mantine/core';
import { IconCheck } from '@tabler/icons';
function Demo() {
return (
<>
<Notification title="We notify you that">
You are now obligated to give a star to Mantine project on GitHub
</Notification>
<Notification icon={<IconCheck size={20} />} title="We notify you that">
You are now obligated to give a star to Mantine project on GitHub
</Notification>
</>
);
}

CloseButtonProps

To customize CloseButton inside Notification, you can pass CloseButtonProps.

<Notification closeButtonProps={{ color: 'red' }} />
<Notification closeButtonProps={{ iconSize: 20 }} />

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' }} />
Download more icon variants from https://tabler-icons.io/i/search

Notification component props

NameTypeDescription
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

NameStatic selectorDescription
root.mantine-Notification-rootRoot element
body.mantine-Notification-bodyNotification body wrapper, contains title and description
loader.mantine-Notification-loaderNotification loader, controlled by loading prop
icon.mantine-Notification-iconNotification icon on the left, controlled by icon prop
title.mantine-Notification-titleNotification title, controlled by title prop
description.mantine-Notification-descriptionNotification description, controlled by children
closeButton.mantine-Notification-closeButtonClose button