Overlay

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

Usage

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 React, { 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"}
</Button>
</div>
<Group position="center">
<Button onClick={() => setVisible((v) => !v)}>Toggle overlay</Button>
</Group>
</>
);
}

With gradient

You can replace background color with gradient, to do so, set gradient prop:

import { Overlay, Button, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
return (
<div
style={{
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%)`}
/>
</div>
);
}

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 with ease
Feedback
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