Overlaypolymorphic

Overlays given element with div element with any color and opacity
Import

Usage

Overlay has absolute position and will take 100% of width and height of parent container. It is used to build components like Modal and LoadingOverlay.

You can change overlay opacity (from 0 to 1), color (CSS color value, not connected to Mantine theme) and z-index (number).

import { useState } from 'react';
import { Button, Group, Box, Overlay } from '@mantine/core';
function Demo() {
const [visible, setVisible] = useState(false);
return (
<>
<Box sx={{ height: 100, position: 'relative' }}>
{visible && <Overlay opacity={0.6} color="#000" zIndex={5} />}
<Button color={visible ? 'red' : 'teal'}>
{!visible ? 'Click as much as you like' : "Won't click, haha"}
</Button>
</Box>
<Group position="center">
<Button onClick={() => setVisible((v) => !v)}>Toggle overlay</Button>
</Group>
</>
);
}

With gradient

import { Overlay, Button, Box, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
return (
<Box
sx={{
position: 'relative',
height: 200,
width: '100%',
maxWidth: 400,
marginLeft: 'auto',
marginRight: 'auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button>Under overlay</Button>
<Overlay
gradient={`linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[4]} 100%)`}
/>
</Box>
);
}

With blur

To blur the overlay backdrop, set the blur prop with a number. This will set the backdrop blur in px. Note that blur is not supported in Firefox.

Overlay with a blur.
import { useState } from 'react';
import { Button, Group, Box, Overlay } from '@mantine/core';
function Demo() {
const [visible, setVisible] = useState(false);
return (
<>
<Box sx={{ height: 100, position: 'relative' }}>
{visible && <Overlay opacity={0.6} color="#000" blur={2} />}
Overlay with a blur
</Box>
<Group position="center">
<Button onClick={() => setVisible((v) => !v)}>Toggle overlay</Button>
</Group>
</>
);
}

Polymorphic component

Overlay is a polymorphic component, you can change root element:

import { Overlay } from '@mantine/core';
import { Link } from 'react-router-dom';
function Demo() {
return (
<>
<Overlay<'a'> component="a" href="#" />
<Overlay<typeof Link> component={Link} to="/hello" />
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Overlay component props

NameTypeDescription
blur
number
Overlay background blur in px
color
BackgroundColor
Overlay background-color
gradient
string
Use gradient instead of background-color
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Value from theme.radius or number to set border-radius in px
zIndex
ZIndex
Overlay z-index