Popover

Non-modal floating panel anchored to a trigger, for small interactive content.

Import

import { Popover, PopoverTrigger } from '@marbleui/ui'

Props

Prop	Type	Default	Description
padding	`'md' \| 'none'`	`'md'`
showArrow	`boolean`	`—`

<PopoverTrigger>alias of DialogTrigger

Re-exported from React Aria DialogTrigger; see its documentation for props.

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria DialogTrigger · React Aria OverlayArrow · React Aria Popover. Follow the primitive's docs for the full keyboard map.

Usage notes

Non-modal floating panel anchored to a trigger, for small interactive content (filters, pickers, mini forms).

<PopoverTrigger>
  <Button variant="outline">Filters</Button>
  <Popover showArrow><Dialog aria-label="Filters">…</Dialog></Popover>
</PopoverTrigger>

Wrap content in a Dialog (from react-aria-components) so focus moves in and Escape closes.
Placement flips automatically near viewport edges; padding="none" for edge-to-edge lists.

Example source · show

import { Dialog, Heading } from 'react-aria-components'
import { Button } from '../button'
import { Switch } from '../switch'
import { TextField } from '../text-field'
import { Popover, PopoverTrigger } from './popover'

export const styles = {
  Form: () => (
    <PopoverTrigger>
      <Button variant="outline">Share</Button>
      <Popover className="w-80" showArrow>
        <Dialog className="flex flex-col gap-4 outline-none">
          <Heading slot="title" className="text-sm font-semibold">Share this board</Heading>
          <TextField aria-label="Invite by email" placeholder="name@company.com" />
          <Switch labelPosition="start" defaultSelected>Anyone with the link can view</Switch>
          <Button slot="close" className="self-end" size="sm">Send invite</Button>
        </Dialog>
      </Popover>
    </PopoverTrigger>
  ),
  Plain: () => (
    <PopoverTrigger>
      <Button variant="soft">What's new</Button>
      <Popover className="w-72" placement="top">
        <Dialog className="outline-none">
          <Heading slot="title" className="mb-1 text-sm font-semibold">Version 2.4</Heading>
          <p className="text-sm text-fg-muted">Faster search, keyboard shortcuts everywhere, and a new dark theme.</p>
        </Dialog>
      </Popover>
    </PopoverTrigger>
  ),
}

Source: packages/ui/src/popover/popover.tsx

Catalog

Category: overlays
Priority: Foundation
Primitive: react-aria
React Aria: Popover
Base UI: Popover