Notification

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

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

Notification is a base component for notification system. Build your own or use @asuikit/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

Default notification

This is default notification with title and body

Teal notification

This is teal notification with icon

Bummer! Notification without title

Uploading data to the server

Please wait until data is uploaded, you cannot close this notification yet

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

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

      <Notification icon={<IconCheck size="1.1rem" />} color="teal" title="Teal notification">
        This is teal notification with icon
      </Notification>

      <Notification icon={<IconX size="1.1rem" />} color="red">
        Bummer! Notification without title
      </Notification>

      <Notification
        loading
        title="Uploading data to the server"
        withCloseButton={false}
      >
        Please wait until data is uploaded, you cannot close this notification yet
      </Notification>
    </>
  );
}

Colors

We notify you that

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

We notify you that

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

With close button

With border

Color

Shades

Radius

Title

Children

import { Notification } from '@asuikit/core';
import { IconCheck } 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={<IconCheck size="1.2rem" />} 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' }} />

Go back

Loader – @asuikit/core

Up next

Progress – @asuikit/core

Notification component props

Name	Type	Description
children	ReactNode	Notification body, place main text here
closeButtonProps	Record<string, any>	Props spread to close button
color	MantineColor	Notification line or icon color
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"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
title	ReactNode	Notification title, displayed before body
withBorder	boolean	Adds border styles
withCloseButton	boolean	Determines whether close button should be visible, true by default

Notification component Styles API

Name	Static selector	Description
root	.asuikit-Notification-root	Root element
body	.asuikit-Notification-body	Notification body wrapper, contains title and description
loader	.asuikit-Notification-loader	Notification loader, controlled by loading prop
icon	.asuikit-Notification-icon	Notification icon on the left, controlled by icon prop
title	.asuikit-Notification-title	Notification title, controlled by title prop
description	.asuikit-Notification-description	Notification description, controlled by children
closeButton	.asuikit-Notification-closeButton	Close button

Learn more about Styles API

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