Popover

overlays

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

Preview

Installation

npm install @launchapp/design-system

Import

import { Popover, PopoverTrigger, PopoverContent } from "@launchapp/design-system";

Examples

Basic Popover

<Popover>  <PopoverTrigger asChild>    <Button variant="outline">Open popover</Button>  </PopoverTrigger>  <PopoverContent className="w-80">    <div className="grid gap-4">      <div className="space-y-2">        <h4 className="font-medium leading-none">Dimensions</h4>        <p className="text-sm text-muted-foreground">          Set the dimensions for the layer.        </p>      </div>    </div>  </PopoverContent></Popover>

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`defaultOpen`	`boolean`	`false`	Initial open state.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side of the trigger (on PopoverContent).
`align`	`"start" \| "center" \| "end"`	`"center"`	Preferred alignment (on PopoverContent).

← PreviousPagination

Next →Portal