Overlaypolymorphic

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 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" />
    </>
  );
}
Go back
Modal – @mantine/core
Up next
Popover – @mantine/core

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
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