Backdrop

Basic Usage

Hello world

import { Button, Backdrop } from 'chic-ui';

const BasicBackdrop = () => {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <>
      <Button onClick={handleToggle}>Toggle</Button>
      <Backdrop visible={open} onClick={handleClose}>
        <p>Hello world</p>
      </Backdrop>
    </>
  );
};

Custom Colored Backdrop

Hello world

<Backdrop color="red" />

Invisible

<Backdrop color="red" visible={false} />

API

import { Backdrop } from 'chic-ui';

Name	Type	Default	Description
visible	boolean	true	If set to `true`, the Backdrop component will not be hidden
color	string		Color of backdrop
onClick	function		Specify a function that will be called when the Backdrop is clicked
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component
children	ReactNode		Contents of the backdrop