Popover

Displays rich content in a portal, triggered by a button.

Installation

pnpm add @wandercom/design-system-web

Usage

import {
  Popover,
  PopoverAnchor,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from '@wandercom/design-system-web/ui/popover';

export function Example() {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Popover title</PopoverTitle>
          <PopoverDescription>Popover description text.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}

Examples

Default

Loading example...

Props

Popover

open?

boolean
Controlled open state.

defaultOpen?

boolean
Uncontrolled default open state.

onOpenChange?

(open: boolean) => void
Callback when open state changes.

modal?

boolean
Whether the popover should behave as a modal. Defaults to false.

PopoverTrigger

asChild?

boolean
Renders the child element and merges props instead of rendering a button element. Uses Radix UI Slot.

PopoverContent

side?

'top' | 'right' | 'bottom' | 'left'
Preferred side of the trigger to render against. Defaults to 'bottom'.

sideOffset?

number
Distance in pixels from the trigger. Defaults to 8.

align?

'start' | 'center' | 'end'
Alignment relative to the trigger. Defaults to 'center'.

className?

string
Additional CSS classes.

PopoverAnchor

asChild?

boolean
Renders the child element and merges props instead of rendering a div element.

PopoverHeader

className?

string
Additional CSS classes.

PopoverTitle

className?

string
Additional CSS classes.

PopoverDescription

className?

string
Additional CSS classes.

Accessibility

The Popover component follows the WAI-ARIA Dialog pattern:

  • Pressing Escape closes the popover
  • Focus is trapped within the popover when modal mode is enabled
  • Focus is returned to the trigger when the popover closes
  • The trigger has aria-expanded and aria-haspopup attributes
Popover