Notification

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

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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

We notify you that

You are now obligated to give a star to Mantine project on GitHub

With close button

With border

Color

Radius

Title

Children

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>
  );
}

With icon

Bummer!

Something went wrong

All good!

Everything is fine

import { IconX, IconCheck } from '@tabler/icons-react';
import { Notification, rem } from '@mantine/core';

function Demo() {
  const xIcon = <IconX style={{ width: rem(20), height: rem(20) }} />;
  const checkIcon = <IconCheck style={{ width: rem(20), height: rem(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 Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

Please wait

The application is trying to reconnect to the server

We notify you that

You are now obligated to give a star to Mantine project on GitHub

Component Styles API

Hover over selectors to highlight corresponding elements

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

Accessibility

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

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

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

Loader

Progress

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter