Popover

<Popover
  renderTrigger={(triggerProps) => (
    <Button
      {...triggerProps}
      text="Show me a dropdown"
      variant="primaryBrand"
    />
  )}
>
  {(closeDropdown) => (
    <div className="body-m p-16 text-center min-w-[400px]">
      Hey there!
      <br />
      <div>Look at me, I&apos;m a dropdown.</div>
      <Button
        className="mt-16"
        variant="primaryBrand"
        text="Close me"
        onClick={closeDropdown}
      />
    </div>
  )}
</Popover>

<>
  <Popover placement="bottom-start" {...otherProps} />
  <Popover placement="bottom-end" {...otherProps} />
  <Popover placement="top-start" {...otherProps} />
  <Popover placement="top-end" {...otherProps} />
  <Popover placement="end-bottom" {...otherProps} />
  <Popover placement="end-top" {...otherProps} />
</>