@mantine/core/lib/components/Notification/Notification.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, DataAttributes, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
import { LoaderProps } from '../Loader';
export type NotificationStylesNames = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'closeButton';
export type NotificationCssVariables = {
    root: '--notification-radius' | '--notification-color';
};
export interface NotificationProps extends BoxProps, StylesApiProps<NotificationFactory>, ElementProps<'div', 'title'> {
    /** Called when the close button is clicked */
    onClose?: () => void;
    /** Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color. When `icon` is provided, sets the icon background color. When no icon is provided, sets the colored accent line on the left. @default theme.primaryColor */
    color?: MantineColor;
    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
    radius?: MantineRadius;
    /** Notification icon, replaces color line */
    icon?: React.ReactNode;
    /** Notification title, displayed above the message body */
    title?: React.ReactNode;
    /** Notification description, displayed below the title. When no title is provided, this serves as the main message. */
    children?: React.ReactNode;
    /** If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided. */
    loading?: boolean;
    /** Adds border to the root element */
    withBorder?: boolean;
    /** If set, the close button is visible @default true */
    withCloseButton?: boolean;
    /** Props passed down to the close button */
    closeButtonProps?: ElementProps<'button'> & DataAttributes;
    /** Props passed down to the `Loader` component */
    loaderProps?: LoaderProps;
}
export type NotificationFactory = Factory<{
    props: NotificationProps;
    ref: HTMLDivElement;
    stylesNames: NotificationStylesNames;
    vars: NotificationCssVariables;
}>;
export declare const Notification: import("../..").MantineComponent<{
    props: NotificationProps;
    ref: HTMLDivElement;
    stylesNames: NotificationStylesNames;
    vars: NotificationCssVariables;
}>;