Blanket

Usage

This is primarily intended as an internal component, used by other components in the design system. It provides an accessible blanket background for modal components.

Here is an example of it used on it's own. Once it's open, you can click anywhere to close it.

const [isOpen, setOpen] = useState(false);
return (
  <>
    <ActionButton label="Show blanket" onClick={() => setOpen(true)} />
    {isOpen && <Blanket animate onClick={() => setOpen(false)} />}
  </>
);