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

React components library focused on usability, accessibility and developer experience

import { BoxProps, MantineRadius, PolymorphicFactory, StylesApiProps } from '../../core';
export type OverlayStylesNames = 'root';
export type OverlayCssVariables = {
    root: '--overlay-bg' | '--overlay-filter' | '--overlay-radius' | '--overlay-z-index';
};
export interface OverlayProps extends BoxProps, StylesApiProps<OverlayFactory> {
    /** Overlay `background-color` opacity 0–1, ignored when `gradient` prop is set @default 0.6 */
    backgroundOpacity?: number;
    /** Overlay `background-color` @default #000 */
    color?: React.CSSProperties['backgroundColor'];
    /** Overlay background blur in px (converted to rem). Applies `backdrop-filter: blur()`. Note: backdrop-filter is not supported in all browsers. @default 0 */
    blur?: number | string;
    /** Changes overlay to gradient. If set, both `color` and `backgroundOpacity` props are ignored. */
    gradient?: string;
    /** Overlay z-index @default 200 */
    zIndex?: string | number;
    /** Key of `theme.radius` or any valid CSS value to set border-radius @default 0 */
    radius?: MantineRadius;
    /** Content inside overlay */
    children?: React.ReactNode;
    /** Centers content inside the overlay using flexbox (sets display: flex, align-items: center, justify-content: center) @default false */
    center?: boolean;
    /** Changes position from `absolute` to `fixed` (viewport-relative instead of parent-relative) @default false */
    fixed?: boolean;
}
export type OverlayFactory = PolymorphicFactory<{
    props: OverlayProps;
    defaultRef: HTMLDivElement;
    defaultComponent: 'div';
    stylesNames: OverlayStylesNames;
    vars: OverlayCssVariables;
}>;
export declare const Overlay: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, OverlayProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(OverlayProps & {
    component?: any;
} & Omit<any, "component" | keyof OverlayProps> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (OverlayProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
    props: OverlayProps;
    defaultRef: HTMLDivElement;
    defaultComponent: "div";
    stylesNames: OverlayStylesNames;
    vars: OverlayCssVariables;
}> & import("../..").ComponentClasses<{
    props: OverlayProps;
    defaultRef: HTMLDivElement;
    defaultComponent: "div";
    stylesNames: OverlayStylesNames;
    vars: OverlayCssVariables;
}> & {
    varsResolver: import("../..").VarsResolver<{
        props: OverlayProps;
        defaultRef: HTMLDivElement;
        defaultComponent: "div";
        stylesNames: OverlayStylesNames;
        vars: OverlayCssVariables;
    }>;
} & import("../..").PolymorphicComponentWithProps<{
    props: OverlayProps;
    defaultRef: HTMLDivElement;
    defaultComponent: "div";
    stylesNames: OverlayStylesNames;
    vars: OverlayCssVariables;
}> & Record<string, never>;