title	type	components	categories	status	designStatus	devStatus	notes
Sheet	component	Sheet	Overlays	New	In Progress	In Progress	Window-level edge-anchored content container with elevation shadow, with option to block content.

Basic Usage

() => {
  const [blocking, setBlocking] = useState(false);
  const [dark, setDark] = useState(false);
  const [position, setPosition] = useState('bottom');
  const [show, setShow] = useState(false);

  const positions = ['left', 'right', 'top', 'bottom'];

  return (
    <>
      <DropdownButton
        id="position-dropdown-btn"
        onSelect={setPosition}
        title="Sheet Position"
      >
        {positions.map(position => (
          <Dropdown.Item eventKey={position}>{position}</Dropdown.Item>
        ))}
      </DropdownButton><br />
      <Button onClick={() => setShow(!show)}>
        {show ? "Hide" : "Show"} the Sheet
      </Button>{' '}
      <Button onClick={() => setBlocking(!blocking)}>
        {blocking ? "Disable": "Enable"} blocking content
      </Button>{' '}
      <Button onClick={() => setDark(!dark)}>
        Set {dark ? "Light": "Dark"} mode
      </Button>

      <Sheet
        position={position}
        show={show}
        blocking={blocking}
        variant={dark ? 'dark' : 'light'}
      >
        This is a Sheet component <br />
        <Button
          onClick={() => setShow(false)}
          variant={dark ? 'inverse-primary' : 'primary'}
        >
          Hide Me!
        </Button>
      </Sheet>
    </>
  )
}