Popup

A popup displays brief content in an overlay.

#Default

Use a popup for content that belongs to the control that opened it.

import { Button, ButtonItem, MenuGroup, Popup } from '@wolf-rayet/react';

<Popup
  isOpen={menu}
  onClose={() => setMenu(false)}
  label="Filters"
  trigger={() => (
    <Button isSelected={menu} onClick={() => setMenu((v) => !v)}>
      Filters
    </Button>
  )}
  content={
    <MenuGroup>
      <ButtonItem>Unassigned</ButtonItem>
      <ButtonItem>Assigned to me</ButtonItem>
      <ButtonItem>Escalated</ButtonItem>
    </MenuGroup>
  }
/>

#Inline dialog

Use a padded popup when the content is prose or a small form.

import { Button, Popup } from '@wolf-rayet/react';

<Popup
  isOpen={dialog}
  onClose={() => setDialog(false)}
  isDialog
  label="About routing"
  placement="bottom-start"
  trigger={() => (
    <Button isSelected={dialog} onClick={() => setDialog((v) => !v)}>
      About routing
    </Button>
  )}
  content={
    <p style={{ margin: 0 }}>
      Conversations go to the bot first. If it cannot answer in two replies, the conversation moves to the
      human queue.
    </p>
  }
/>