Popover

The Popover component displays content in a floating container that appears when clicking on a trigger element. It provides a flexible way to show additional information or actions.

Demo

React

Vue

Usage

React

import {
  Button,
  Popover,
  TextAreaInput,
} from '@fintech-sandpit/ui/react';

return (
  <Popover.Root>
    <Popover.Trigger>
      <Button colorScheme="primary">
        Add Comment
      </Button>
    </Popover.Trigger>

    <Popover.Content className="w-80 p-sm space-y-4">
      <TextAreaInput
        placeholder="Write your comment here..."
        rows={4}
        size="sm"
      />

      <div className="flex gap-2 justify-end">
        <Button
          size="sm"
          variant="ghost"
        >
          Cancel
        </Button>

        <Button
          colorScheme="primary"
          size="sm"
        >
          Post Comment
        </Button>
      </div>
    </Popover.Content>
  </Popover.Root>
);

Vue

<script setup lang="ts">
import {
  Button,
  Popover,
  TextAreaInput,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>
      <Button color-scheme="primary">
        Add Comment
      </Button>
    </Popover.Trigger>

    <Popover.Content class="w-80 p-sm space-y-4">
      <TextAreaInput
        placeholder="Write your comment here..."
        rows="4"
        size="sm"
      />

      <div class="flex gap-2 justify-end">
        <Button
          size="sm"
          variant="ghost"
        >
          Cancel
        </Button>

        <Button
          color-scheme="primary"
          size="sm"
        >
          Post Comment
        </Button>
      </div>
    </Popover.Content>
  </Popover.Root>
</template>

Components

Popover.Root

The root component that manages the popover state and provides context to child components. Supports both controlled and uncontrolled usage.

Popover.Trigger

The element that triggers the popover when clicked. Use asChild prop to merge props with a child element.

Popover.Content

The main content container for the popover. Automatically includes positioning and portal rendering.

Props

Popover Root Props

React

Name	Type	Default	Description
open	boolean	—	Whether the popover is open (controlled)
defaultOpen	boolean	false	Whether the popover is open by default (uncontrolled)
autoFocus	boolean	true	Whether to focus the trigger element when the popover is opened
modal	boolean	false	Whether to trap focus inside the popover
portalled	boolean	true	Whether to portal the popover content
closeOnInteractOutside	boolean	true	Whether to close on outside interaction
closeOnEscape	boolean	true	Whether to close on Escape key
lazyMount	boolean	true	Whether to lazy mount the popover content
unmountOnExit	boolean	true	Whether to unmount the popover content when it is closed
placement	Placement	bottom-start	The placement of the popover
offsetMainAxis	number	8	The offset of the popover on the main axis, px
offsetCrossAxis	number	0	The offset of the popover on the cross axis, px

Vue

Name	Type	Default	Description
model-value	boolean	—	Whether the popover is open (controlled) 1
default-open	boolean	false	Whether the popover is open by default (uncontrolled)
auto-focus	boolean	true	Whether to focus the trigger element when the popover is opened
modal	boolean	false	Whether to trap focus inside the popover
portalled	boolean	true	Whether to portal the popover content
close-on-interact-outside	boolean	true	Whether to close on outside interaction
close-on-escape	boolean	true	Whether to close on Escape key
lazy-mount	boolean	true	Whether to lazy mount the popover content
unmount-on-exit	boolean	true	Whether to unmount the popover content when it is closed
placement	Placement	bottom-start	The placement of the popover
offset-main-axis	number	8	The offset of the popover on the main axis, px
offset-cross-axis	number	0	The offset of the popover on the cross axis, px

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Type	Description
onOpen	() => void	Callback fired when the popover is opened
onClose	() => void	Callback fired when the popover is closed

Vue

Name	Payload	Description
@open	—	Event emitted when the popover is opened
@close	—	Event emitted when the popover is closed

Types

type Placement = (
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'
)