Popover

Root component for a popover (non-modal floating panel). Manages open/closed state.

Usage

@desk/ui/components/popover

<Popover>
  <PopoverTrigger asChild>
    <Button emphasis="outline" tone="neutral">
      Finish
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <Stack gap="sm">
      <Text size="sm" weight="semibold">
        Finish
      </Text>
      <Text size="xs" variant="muted">
        Applies to every swatch in this palette.
      </Text>
      <Flex gap="xs" wrap="wrap">
        <Button emphasis="soft" size="sm" tone="neutral">
          Matte
        </Button>
        <Button emphasis="outline" size="sm" tone="neutral">
          Polished
        </Button>
        <Button emphasis="outline" size="sm" tone="neutral">
          Honed
        </Button>
      </Flex>
    </Stack>
  </PopoverContent>
</Popover>

Best practices

Use Popover for an anchored non-blocking panel dismissed on outside-click / Esc; a page-blocking modal is a Dialog, a menu of actions is a DropdownMenu.
It's non-modal by default (modal={false}) so the page stays interactive — pass modal only when you must trap focus and block the background.
PopoverContent portals to the body; anchor to a non-trigger element with PopoverAnchor.

Props

PopoverArrow

Prop	Type	Default	Description
className	`string`

PopoverContent

Prop	Type	Default	Description
size	`PopoverSize`

Also exports

componentPopover
constpopoverAnatomy
componentPopoverAnchor
componentPopoverTrigger

Anatomy

Popover

popover

Floating content panel

PopoverTrigger

popover-trigger

Element that opens popover

PopoverContent

popover-content

Popover content area

PopoverAnchor

popover-anchor

Optional positioning anchor

Composition

Used by

ColorPalette, Combobox, DataGrid, DataGridColumnFilter, ProductCard, TagSelector