Dialog

const [opened, setOpened] = useState(true);

return (
  <div className={cn('flex', 'p-l', 'gap-m')}>
    <Dialog
      opened={opened}
      onOpenedChanged={({ detail: { value } }) => setOpened(value)}
      header={
        <h3 className={cn('m-0')}>
          New employee
        </h3>
      }
      footer={
        <div className={cn('flex', 'gap-m')}>
          <Button onClick={() => setOpened(false)}>Cancel</Button>
          <Button onClick={() => setOpened(false)} theme='primary'>Add</Button>
        </div>
      }>
      <VerticalLayout style={{ width: '18rem', alignItems: 'stretch' }}>
        <TextField label='First name' />
        <TextField label='Last name' />
      </VerticalLayout>
    </Dialog>
    <Button onClick={() => setOpened(!opened)}>Show dialog</Button>
  </div>
);