Overlay

Display overlay with any color and opacity over element

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

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" />

For example, you can create link overlay and intercept all clicks:

You've won million dollars in cash

Please click anywhere on this card to claim your reward, this is not fraud, trust us

import React from 'react';
import { Card, Image, Text, Overlay } from '@mantine/core';

function Demo() {
  return (
    <div style={{ width: 340, margin: 'auto' }}>
      <Card shadow="sm">
        <Image
          src="https://images.unsplash.com/long-image-url.jpg"
          height={160}
          alt="Noway"
        />

        <Text weight={500} size="lg">
          You&apos;ve won million dollars in cash
        </Text>

        <Text style={{ marginTop: 10 }} size="sm">
          Please click anywhere on this card to claim your reward, this is not a fraud, trust us
        </Text>

        <Overlay
          opacity={0}
          component="a"
          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
          target="_blank"
        />
      </Card>
    </div>
  );
}