Overlaypolymorphic

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

Usage

Overlay takes 100% of width and height of parent container or viewport if fixed prop is set. Set color and opacity props to change Overlay background-color. Note that opacity prop does not change CSS opacity property, it changes background-color. For example, if you set color="#000" and opacity={0.85} background-color will be rgba(0, 0, 0, 0.85):

import { useState } from 'react';
import { Button, Overlay, Image, AspectRatio } from '@mantine/core';


function Demo() {
  const [visible, setVisible] = useState(true);
  return (
    <>
      <AspectRatio ratio={16 / 9} maw={400} mx="auto">
        <Image src="https://images.unsplash.com/photo-1618359057154-e21ae64350b6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80" />
        {visible && <Overlay color="#000" opacity={0.85} />}
      </AspectRatio>
      <Button onClick={() => setVisible((v) => !v)} fullWidth maw={200} mx="auto" mt="xl">
        Toggle overlay
      </Button>
    </>
  );
}

Gradient

Set gradient prop to use background-image instead of background-color. When gradient prop is set, color and opacity props are ignored.

import { useState } from 'react';
import { Button, Overlay, Image, AspectRatio } from '@mantine/core';


function Demo() {
  const [visible, setVisible] = useState(true);
  return (
    <>
      <AspectRatio ratio={16 / 9} maw={400} mx="auto">
        <Image src="https://images.unsplash.com/photo-1618359057154-e21ae64350b6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80" />
        {visible && (
          <Overlay
            gradient="linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%)"
            opacity={0.85}
          />
        )}
      </AspectRatio>
      <Button onClick={() => setVisible((v) => !v)} fullWidth maw={200} mx="auto" mt="xl">
        Toggle overlay
      </Button>
    </>
  );
}

Blur

Set blur prop to add backdrop-filter: blur({value}) styles Note that backdrop-filter is not supported in all browsers.

import { useState } from 'react';
import { Button, Overlay, Image, AspectRatio } from '@mantine/core';


function Demo() {
  const [visible, setVisible] = useState(false);


  return (
    <AspectRatio ratio={16 / 9} maw={400} mx="auto">
      <Image
        src="https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
        onClick={() => setVisible(false)}
      />
      {!visible && (
        <Overlay blur={15} center>
          <Button color="red" radius="xl" onClick={() => setVisible(true)}>
            NSFW, click to reveal
          </Button>
        </Overlay>
      )}
    </AspectRatio>
  );
}

Polymorphic component

Overlay is a polymorphic component, set component prop to 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
string | number
Overlay background blur, 0 by default
center
boolean
Determines whether content inside overlay should be vertically and horizontally centered, false by default
children
ReactNode
Content rendered inside overlay
color
BackgroundColor
Overlay background-color, #000 by default
fixed
boolean
Determines whether overlay should have fixed position instead of absolute, false by default
gradient
string
Changes overlay to gradient, if set color prop is ignored
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
zIndex
ZIndex
Overlay z-index, 200 by default
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