Drawer is a type of layered surface containing supplementary content at the edge of the screen.

nested

onClose

open

Allows interacting with page content while drawer is open

passive

width

() => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(!open)}>Open Drawer</Button>
      <Drawer open={open} onClose={() => setOpen(!open)}>
        <Drawer.Header>
          <Drawer.Header.Title title="Header" />
          <Drawer.Header.Description>Run artifacts are logs and files that each run generates.</Drawer.Header.Description>
        </Drawer.Header>
        <Drawer.Content>
          <Typography>Drawer content</Typography>
        </Drawer.Content>
        <Drawer.Actions>
          <Button variant="primary">Mark as Done</Button>
          <Button variant="secondary">Retry</Button>
        </Drawer.Actions>
      </Drawer>
    </>
  );
}

Drawer

() => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(!open)}>Open Passive Drawer</Button>
      <Drawer open={open} onClose={() => setOpen(!open)} passive>
        <Drawer.Header>
          <Drawer.Header.Title title="Header" />
          <Drawer.Header.Description>Run artifacts are logs and files that each run generates.</Drawer.Header.Description>
        </Drawer.Header>
        <Drawer.Content>
          <Typography>You can still interact with the page content while the drawer is open.</Typography>
        </Drawer.Content>
        <Drawer.Actions>
          <Button variant="primary">Mark as Done</Button>
          <Button variant="secondary">Retry</Button>
        </Drawer.Actions>
      </Drawer>
    </>
  );
}

Name	Description	Default
nested	Is the drawer displayed inside a Dialog	-
onClose required	Drawer close callback	-
open required	Drawer open state	-
passive	Allows interacting with page content while drawer is open	-
width	Drawer width	-

Drawer component

Passive Drawer