Overlays given element with div element with any color and opacity


Overlay had 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, Overlay } from '@mantine/core';
function Demo() {
const [visible, setVisible] = useState(false);
return (
<div style={{ 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"}
<Group position="center">
<Button onClick={() => setVisible((v) => !v)}>Toggle overlay</Button>

With gradient

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

Custom component

You can pass custom tag or component that will be used as root element:

import { Link } from 'react-router-dom';
<Overlay component="a" href="https://mantine.dev" />
<Overlay component={Link} to="/mantine" />
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback