Overlay
Overlays given element with div element with any color and opacity
Import
Source
Docs
Package
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></>);}
With gradient
You can replace background color with gradient, to do so, set gradient prop:
import { Overlay, Button, useMantineTheme } from '@mantine/core';function Demo() {const theme = useMantineTheme();return (<divstyle={{position: 'relative',height: 200,width: '100%',maxWidth: 400,marginLeft: 'auto',marginRight: 'auto',display: 'flex',alignItems: 'center',justifyContent: 'center',}}><Button>Under overlay</Button><Overlaygradient={`linear-gradient(105deg, ${theme.black} 20%, #312f2f 50%, ${theme.colors.gray[4]} 100%)`}/></div>);}
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" />
Built by Vitaly Rtishchev and these awesome people