Popover

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

Usage

@instruments/materia-ui/components/popover

<Popover>
  <PopoverTrigger render={<Button emphasis="outline" tone="neutral" />}>
    Finish
  </PopoverTrigger>
  <PopoverContent>
    <Stack gap="sm">
      <Text size="paragraph-sm" weight="semibold">
        Finish
      </Text>
      <Text size="caption" 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 its anchor prop.

Props

PopoverArrow

Prop	Type	Default	Description
className	`string`

PopoverBackdrop

Prop	Type	Default	Description
className	`string`

PopoverContent

Prop	Type	Default	Description
className	`string`
positionerClassName	`string`
size	`PopoverSize`

Also exports

componentPopover
typePopoverActions
constpopoverAnatomy
componentPopoverTrigger

Anatomy

Popover

popover

Floating content panel

PopoverTrigger

popover-trigger

Element that opens popover

PopoverContent

popover-content

Popover content area

Composition

Used by

ColorPalette, MegaMenu, ProductCard, TagSelector