Popover

Usage

import { Popover } from "@lemonsqueezy/wedges";

<Popover>
  <Popover.Trigger>Trigger</Popover.Trigger>
  <Popover.Content>Content</Popover.Content>
</Popover>

You can use Popover.Portal to render the content in a different location in the DOM. See API Reference for details.

<Popover>
  <Popover.Portal>
    <Popover.Trigger>Trigger</Popover.Trigger>
    <Popover.Content>Content</Popover.Content>
  </Popover.Portal>
</Popover>

API Reference

Popover component extends Radix Popover component and supports all of its props.

Contains all parts of a popover.

Prop	Value	Default
`defaultOpen`	`boolean`	`false`
`modal`	`boolean`	`false`
`onOpenChange`	`function`	/
`open`	`boolean`	`false`

Popover.Trigger

The button that toggles the popover. By default, the Popover.Content will position itself against the trigger.

Prop	Value	Default
`asChild`	`boolean`	`false`

Data attribute	Value
`[data-state]`	`"open" \| "closed"`

Popover.Content

The content of the popover

Prop	Value	Default
`align`	`"start" \| "center" \| "end"`	`"center"`
`alignOffset`	`number`	`0`
`arrowPadding`	`number`	`0`
`asChild`	`boolean`	`false`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`8`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`onCloseAutoFocus`	`function`	/
`onEscapeKeyDown`	`function`	/
`onFocusOutside`	`function`	/
`onInteractOutside`	`function`	/
`onOpenAutoFocus`	`function`	/
`onPointerDownOutside`	`function`	/
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset`	`number`	`8`
`sticky`	`"partial" \| "always"`	`partial`

Data attribute	Value
`[data-align]`	`"start" \| "end" \| "center"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-state]`	`"open" \| "closed"`

Popover.Anchor

An optional element to position the Popover.Content against. If this part is not used, the content will position alongside the Popover.Trigger.

Prop	Value	Default
`asChild`	`boolean`	`false`

Popover.Arrow

An optional arrow element to render alongside the popover. This can be used to help visually link the anchor with the Popover.Content. Must be rendered inside Popover.Content.

Prop	Value	Default
`asChild`	`boolean`	`false`
`height`	`number`	`5`
`width`	`number`	`10`

Popover.Close

The button that closes the popover.

Prop	Value	Default
`asChild`	`boolean`	`false`

Popover.Portal

The portal that renders the popover content in a different location in the DOM.

Prop	Value	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Accessibility

The Popover component supports all accessibility features of the Radix Popover primitive.

Examples

The following example shows a combination of the Popover and ButtonGroup components.

Wedges