Mantine UIFAQColors generator

Notification

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

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

Usage

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

Color
Radius
import { Notification } from '@mantine/core';

function Demo() {
  return (
    <Notification title="We notify you that">
      You are now obligated to give a star to Mantine project on GitHub
    </Notification>
  );
}

Notifications system features

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

  • dragging them left or right
  • horizontal scroll swipe while hovered

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

See the notifications package documentation for configuration details.

With icon

import { XIcon, CheckIcon } from '@phosphor-icons/react';
import { Notification } from '@mantine/core';

function Demo() {
  const xIcon = <XIcon size={20} />;
  const checkIcon = <CheckIcon size={20} />;

  return (
    <>
      <Notification icon={xIcon} color="red" title="Bummer!">
        Something went wrong
      </Notification>
      <Notification icon={checkIcon} color="teal" title="All good!" mt="md">
        Everything is fine
      </Notification>
    </>
  );
}

Styles API

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

/*
 * Hover over selectors to apply outline styles
 *
 */

Accessibility

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

import { Notification } from '@mantine/core';

function Demo() {
  return (
    <Notification
      closeButtonProps={{ 'aria-label': 'Hide notification' }}
    />
  );
}

Loader

Progress