v4.2.12

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, 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>
    </>
  );
}

Custom component

You can pass custom tag or component that will be used as 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" />
    </>
  );
}
Go back
Modal – @mantine/core
Up next
Popover – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter