Overlay

Overlays parent element with div element with any color and opacity

Polymorphic

Polymorphic component

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 backgroundOpacity props to change Overlay background-color. Note that backgroundOpacity prop does not change CSS opacity property, it changes background-color. For example, if you set color="#000" and backgroundOpacity={0.85} background-color will be rgba(0, 0, 0, 0.85):

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

function Demo() {
  const [visible, setVisible] = useState(true);
  return (
    <>
      <AspectRatio ratio={16 / 9} maw={400} mx="auto" pos="relative">
        <img
          src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png"
          alt="Demo"
        />
        {visible && <Overlay color="#000" backgroundOpacity={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 backgroundOpacity props are ignored.

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

function Demo() {
  const [visible, setVisible] = useState(true);
  return (
    <>
      <AspectRatio ratio={16 / 9} maw={400} mx="auto" pos="relative">
        <img
          src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png"
          alt="Demo"
        />
        {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.

Blur

import { Overlay, AspectRatio } from '@mantine/core';

function Demo() {
  return (
    <AspectRatio ratio={16 / 9} maw={400} mx="auto" pos="relative">
      <img
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png"
        alt="Demo"
      />
      <Overlay color="#000" backgroundOpacity={0.35} blur={15} />
    </AspectRatio>
  );
}

Polymorphic component

Overlay is a polymorphic component – its default root element is div, but it can be changed to any other element or component with component prop:

import { Overlay } from '@mantine/core';

function Demo() {
  return <Overlay component="a" />;
}

You can also use components in component prop, for example, Next.js Link:

import Link from 'next/link';
import { Overlay } from '@mantine/core';

function Demo() {
  return <Overlay component={Link} href="/" />;
}

Polymorphic components with TypeScript
Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, OverlayProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:
import type { OverlayProps, ElementProps } from '@mantine/core';

interface MyOverlayProps extends OverlayProps,
  ElementProps<'a', keyof OverlayProps> {}
If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

Modal

Popover