v3.6.14
Discord
Source code

Overlay

Overlays given element with div element with any color and opacity
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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 { 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

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" />
Go back
Modal – @mantine/core
Up next
Popover – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter