diff --git a/src/core/components/index.ts b/src/core/components/index.ts
index 454a4b3f7..77e4851d5 100644
--- a/src/core/components/index.ts
+++ b/src/core/components/index.ts
@@ -3,6 +3,7 @@ export * from './breadcrumbs'
 export * from './dialog'
 export * from './hotkeys'
 export * from './menu'
+export * from './popover-button'
 export * from './skeleton'
 export * from './tab'
 export * from './toast'
diff --git a/src/core/components/popover-button/PopoverButton.test.tsx b/src/core/components/popover-button/PopoverButton.test.tsx
new file mode 100644
index 000000000..78b77d568
--- /dev/null
+++ b/src/core/components/popover-button/PopoverButton.test.tsx
@@ -0,0 +1,235 @@
+/** @jest-environment jsdom */
+import {fireEvent, screen} from '@testing-library/react'
+import '../../../../test/mocks/matchMedia.mock'
+import {render} from '../../../../test'
+import {PopoverButton} from './PopoverButton'
+
+describe('PopoverButton', () => {
+  it('should open popover when button is clicked', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    expect(screen.queryByText('Content')).toBeInTheDocument()
+  })
+
+  it('should close popover when button is clicked again', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    expect(screen.queryByText('Content')).toBeInTheDocument()
+
+    fireEvent.click(trigger)
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+  })
+
+  it('should close popover when Escape key is pressed and focus is returned to button', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    expect(screen.queryByText('Content')).toBeInTheDocument()
+
+    fireEvent.keyDown(screen.getByText('Content'), {key: 'Escape'})
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+
+    // Check that the button regains focus
+    expect(document.activeElement).toBe(trigger)
+  })
+
+  it('should focus the first focusable element in the popover when opened', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => (
+          <div data-testid="menu">
+            <button tabIndex={0}>First</button>
+            <button tabIndex={0}>Second</button>
+          </div>
+        )}
+      />,
+    )
+
+    expect(screen.queryByTestId('menu')).not.toBeInTheDocument()
+    expect(screen.queryByText('First')).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    // Check that the first focusable element is focused
+    expect(document.activeElement).toBe(screen.getByRole('button', {name: 'First'}))
+  })
+
+  it('should close popover when clicking outside and focus returned to button', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    expect(screen.queryByText('Content')).toBeInTheDocument()
+
+    // Simulate outside click
+    fireEvent.mouseDown(document.body)
+
+    // Check that the popover is closed and focus is returned to the trigger button
+    expect(screen.queryByText('Content')).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+
+    // Check that the button regains focus
+    expect(document.activeElement).toBe(trigger)
+  })
+
+  it('should call `onOpen` when popover is opened', async () => {
+    const onOpen = jest.fn()
+
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        onOpen={onOpen}
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    expect(onOpen).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call `onClose` when popover is closed', async () => {
+    const onClose = jest.fn()
+
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        onClose={onClose}
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+    fireEvent.click(trigger)
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should set appropriate ARIA attributes on the button and popover content', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+    const ariaControls = trigger.getAttribute('aria-controls')
+
+    expect(trigger).toHaveAttribute('aria-haspopup', 'true')
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    expect(trigger).toHaveAttribute('aria-controls')
+
+    fireEvent.click(trigger)
+
+    // After clicking, aria-expanded should be true
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+    const content = screen.getByText('Content')
+
+    expect(content).toHaveAttribute('aria-labelledby', trigger.id)
+    expect(content).toHaveAttribute('id', ariaControls)
+
+    fireEvent.click(trigger)
+
+    // After clicking again, aria-expanded should revert to false
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('should close popover when invoking `close` callback from `renderContent`', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={() => <button>Trigger</button>}
+        renderContent={({close}) => <button onClick={close}>Close</button>}
+      />,
+    )
+
+    expect(screen.queryByText('Close')).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', {name: 'Trigger'})
+
+    fireEvent.click(trigger)
+
+    expect(screen.queryByText('Close')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Close'))
+
+    expect(screen.queryByText('Close')).not.toBeInTheDocument()
+  })
+
+  it('should return `isOpen` from `renderButton`', async () => {
+    render(
+      <PopoverButton
+        ariaHasPopUp="true"
+        renderButton={({isOpen}) => <button>{isOpen ? 'Open' : 'Closed'}</button>}
+        renderContent={() => <div>Content</div>}
+      />,
+    )
+
+    expect(screen.getByRole('button')).toHaveTextContent('Closed')
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(screen.getByRole('button')).toHaveTextContent('Open')
+  })
+})
diff --git a/src/core/components/popover-button/PopoverButton.tsx b/src/core/components/popover-button/PopoverButton.tsx
new file mode 100644
index 000000000..c7526b07d
--- /dev/null
+++ b/src/core/components/popover-button/PopoverButton.tsx
@@ -0,0 +1,200 @@
+import {
+  cloneElement,
+  FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  HTMLProps,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import {css, styled} from 'styled-components'
+import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
+import {useClickOutsideEvent} from '../../hooks'
+import {Popover} from '../../primitives'
+import {PopoverButtonProps} from './types'
+
+interface StyledPopoverProps {
+  $maxHeight?: number
+  $maxWidth?: number
+  $minHeight?: number
+  $minWidth?: number
+}
+
+const StyledPopover = styled(Popover)<StyledPopoverProps>((props) => {
+  const {$maxHeight, $maxWidth, $minHeight, $minWidth} = props
+
+  return css`
+    ${$maxHeight && `max-height: ${$maxHeight}px;`}
+    ${$maxWidth && `max-width: ${$maxWidth}px;`}
+    ${$minHeight && `min-height: ${$minHeight}px;`}
+    ${$minWidth && `min-width: ${$minWidth}px;`}
+  `
+})
+
+/**
+ * A wrapper around the `Popover` primitive that handles:
+ * - Opening and closing the popover when the button is clicked
+ * - Focusing the first element in the popover when it opens
+ * - Focusing the button when the popover closes with the Escape key
+ * - Locking focus within the popover when it is open
+ * - Closing the popover when a click occurs outside the button or popover
+ * - Sets appropriate ARIA attributes on the button and popover content
+ *
+ * @beta
+ */
+export const PopoverButton = forwardRef(function PopoverButton(
+  props: PopoverButtonProps,
+  forwardedRef: ForwardedRef<HTMLButtonElement | null>,
+) {
+  const {
+    ariaHasPopUp,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    onClose,
+    onOpen,
+    renderButton,
+    renderContent,
+    ...popoverProps
+  } = props
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null)
+
+  const focusGuardPreRef = useRef<HTMLDivElement | null>(null)
+  const focusGuardPostRef = useRef<HTMLDivElement | null>(null)
+
+  const buttonId = useId()
+
+  const handleClose = useCallback(() => {
+    if (!open) return
+
+    setOpen(false)
+    onClose?.()
+
+    buttonElement?.focus()
+  }, [buttonElement, onClose, open])
+
+  const handleOpen = useCallback(() => {
+    if (open) return
+
+    setOpen(true)
+    onOpen?.()
+  }, [onOpen, open])
+
+  const handleButtonClick = useCallback(() => {
+    if (open) {
+      handleClose()
+    } else {
+      handleOpen()
+    }
+  }, [handleClose, handleOpen, open])
+
+  const handlePopoverKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Escape' && open) {
+        handleClose()
+      }
+    },
+    [handleClose, open],
+  )
+
+  const handlePopoverFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      const target = event.target
+
+      if (contentElement && target === focusGuardPreRef.current) {
+        focusLastDescendant(contentElement)
+
+        return
+      }
+
+      if (contentElement && target === focusGuardPostRef.current) {
+        focusFirstDescendant(contentElement)
+
+        return
+      }
+    },
+    [contentElement],
+  )
+
+  // Expose the button element to the parent component
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => buttonElement,
+    [buttonElement],
+  )
+
+  useEffect(() => {
+    if (open && contentElement) {
+      focusFirstDescendant(contentElement)
+    }
+  }, [contentElement, open])
+
+  useClickOutsideEvent(
+    () => handleClose(),
+    () => [buttonElement, popoverElement],
+  )
+
+  // Button
+  const buttonProps: HTMLProps<HTMLButtonElement> & {'data-ui': string} = {
+    'aria-controls': `content-${buttonId}`,
+    'aria-expanded': open,
+    'aria-haspopup': ariaHasPopUp,
+    'data-ui': 'PopoverButton',
+    'id': buttonId,
+    'onClick': handleButtonClick,
+    'ref': setButtonElement,
+    'selected': open,
+  }
+
+  const renderedButton = renderButton({isOpen: open})
+
+  const button = cloneElement(renderedButton, buttonProps)
+
+  // Content
+  const contentProps: HTMLProps<HTMLDivElement> = {
+    'aria-labelledby': buttonProps.id,
+    'id': buttonProps['aria-controls'],
+    'ref': setContentElement,
+  }
+
+  const renderedContent = renderContent({close: handleClose})
+
+  const content = (
+    <>
+      <div aria-hidden="true" ref={focusGuardPreRef} tabIndex={0} />
+
+      {cloneElement(renderedContent, contentProps)}
+
+      <div aria-hidden="true" ref={focusGuardPostRef} tabIndex={0} />
+    </>
+  )
+
+  return (
+    <StyledPopover
+      {...popoverProps}
+      $maxHeight={maxHeight}
+      $maxWidth={maxWidth}
+      $minHeight={minHeight}
+      $minWidth={minWidth}
+      content={content}
+      data-ui="PopoverButton__popover"
+      onFocus={handlePopoverFocus}
+      onKeyDown={handlePopoverKeyDown}
+      open={open}
+      ref={setPopoverElement}
+    >
+      {button}
+    </StyledPopover>
+  )
+})
diff --git a/src/core/components/popover-button/index.ts b/src/core/components/popover-button/index.ts
new file mode 100644
index 000000000..1af92f0da
--- /dev/null
+++ b/src/core/components/popover-button/index.ts
@@ -0,0 +1,2 @@
+export * from './PopoverButton'
+export * from './types'
diff --git a/src/core/components/popover-button/types.ts b/src/core/components/popover-button/types.ts
new file mode 100644
index 000000000..9e723bef2
--- /dev/null
+++ b/src/core/components/popover-button/types.ts
@@ -0,0 +1,64 @@
+import {HTMLProps, ReactElement} from 'react'
+import {PopoverProps} from '../../primitives'
+
+/**
+ * @beta
+ */
+export interface PopoverButtonProps
+  extends Omit<PopoverProps, 'children' | 'content' | 'open' | 'referenceElement'> {
+  /**
+   * ARIA attribute for the button element.
+   */
+  ariaHasPopUp: HTMLProps<HTMLButtonElement>['aria-haspopup']
+  /**
+   * Callback that is invoked when the popover is closed.
+   */
+  onClose?: () => void
+  /**
+   * Callback that is invoked when the popover is opened.
+   */
+  onOpen?: () => void
+  /**
+   * Maximum height of the popover.
+   */
+  maxHeight?: number
+  /**
+   * Maximum width of the popover.
+   */
+  maxWidth?: number
+  /**
+   * Minimum height of the popover.
+   */
+  minHeight?: number
+  /**
+   * Minimum width of the popover.
+   */
+  minWidth?: number
+  /**
+   * Render callback for the button element.
+   *
+   * ```tsx
+   * <PopoverButton
+   *   renderButton={({isOpen}) => <button>{isOpen ? "Close" : "Open"}</button>}
+   *   // ... rest of props
+   * />
+   * ```
+   */
+  renderButton: (props: {isOpen: boolean}) => ReactElement
+  /**
+   * Render callback for the popover content.
+   *
+   * ```tsx
+   * <PopoverButton
+   *   renderContent={({close}) => (
+   *     <div>
+   *       <h1>Popover content</h1>
+   *       <button onClick={close}>Close</button>
+   *     </div>
+   *   )}
+   *   // ... rest of props
+   * />
+   * ```
+   */
+  renderContent: (props: {close: () => void}) => ReactElement
+}
diff --git a/stories/components/PopoverButton.stories.tsx b/stories/components/PopoverButton.stories.tsx
new file mode 100644
index 000000000..92f2968c4
--- /dev/null
+++ b/stories/components/PopoverButton.stories.tsx
@@ -0,0 +1,45 @@
+import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
+import {Button, Flex, Stack} from '@sanity/ui/index'
+import type {Meta, StoryObj} from '@storybook/react'
+import {PopoverButton, PopoverButtonProps} from '../../src/core/components/popover-button'
+
+function StoryComponent(props: PopoverButtonProps) {
+  // De-structure props that we should not be forwarded to the PopoverButton component.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {renderButton, renderContent, ariaHasPopUp, ...rest} = props
+
+  return (
+    <Flex align="center" justify="center" height="fill" padding={5}>
+      <PopoverButton
+        ariaHasPopUp={ariaHasPopUp || 'true'}
+        renderButton={({isOpen}) => (
+          <Button
+            mode="bleed"
+            text={isOpen ? 'Close' : 'Open'}
+            icon={isOpen ? ArrowDownIcon : ArrowUpIcon}
+          />
+        )}
+        renderContent={({close}) => (
+          <Stack role="menu">
+            <Button mode="bleed" role="menuitem" text="First" />
+            <Button mode="bleed" role="menuitem" text="Second" />
+            <Button mode="bleed" role="menuitem" text="Third" onClick={close} />
+          </Stack>
+        )}
+        padding={2}
+        {...rest}
+      />
+    </Flex>
+  )
+}
+
+const meta: Meta<PopoverButtonProps> = {
+  component: PopoverButton,
+}
+
+export default meta
+type Story = StoryObj<PopoverButtonProps>
+
+export const Default: Story = {
+  render: StoryComponent,
+}