Skip to content

Demos#

Basic usage#

<Popover
  trigger={({ active, ...triggerProps }) => (
    <Button icon="question" {...triggerProps} selected={active} />
  )}
  title="Need help?"
>
  Popover content that appears when the custom trigger button is toggled.
</Popover>

Without close button#

<Popover
  hideCloseButton
  trigger={(triggerProps) => (
    <Button text="More info" variant="secondary" {...triggerProps} />
  )}
  title="More information"
  content={({ close }) => (
    <Flex.Stack>
      <P>
        This popover hides the default close button. You can still close it
        programmatically by calling the provided helpers.
      </P>
      <Button text="Dismiss" variant="secondary" onClick={close} />
    </Flex.Stack>
  )}
/>
Suggest an edit