Notification

import { Notification } from '@mantine/core';
import { Check, X } from 'tabler-icons-react';

function Demo() {
  return (
    <>
      <Notification title="Default notification">
        This is default notification with title and body
      </Notification>

      <Notification icon={<Check size={18} />} color="teal" title="Teal notification">
        This is teal notification with icon
      </Notification>

      <Notification icon={<X 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>
    </>
  );
}

import { Notification } from '@mantine/core';
import { Check } from 'tabler-icons-react';

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={<Check size={20} />} title="We notify you that">
        You are now obligated to give a star to Mantine project on GitHub
      </Notification>
    </>
  );
}