Popover

The Popover component can be used in conjunction with the PopoverTrigger component to create modal experiences:

<PopoverTrigger
  PopoverComponent={({ close }) => (
    <Popover close={close}>
      <List bare ariaLabel="Popover" autofocus>
        <ListButtonItem
          bare
          headline="Option 1"
          onClick={() => {
            close();
          }}
          color="secondary"
        />
        <ListButtonItem
          bare
          headline="Option 2"
          onClick={() => {
            close();
          }}
          color="secondary"
        />
        <ListButtonItem
          bare
          headline="Option 3"
          onClick={() => {
            close();
          }}
          color="secondary"
          withDivider={false}
        />
      </List>
    </Popover>
  )}
>
  {({ toggle }) => (
    <Button
      style={{ position: "relative" }}
      label="Popover trigger"
      color="positive"
      onClick={() => {
        toggle(undefined);
      }}
    />
  )}
</PopoverTrigger>