Popover

Popover is a small panel anchored to a button: column filters, a share link, a short form. For a list of actions, use Menu.

import { Popover } from '@beyul/sulmu-ui'

Source · Figma

Examples

Basic

Choose columns

import { Button, Checkbox, Popover, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Popover
      title="Columns"
      placement="bottom-start"
      trigger={<Button variant="secondary">Choose columns</Button>}
    >
      <Stack gap={2}>
        <Checkbox defaultChecked>Full name</Checkbox>
        <Checkbox defaultChecked>Email</Checkbox>
        <Checkbox>Last login</Checkbox>
      </Stack>
    </Popover>
  )
}

Inverse

Share

import { Button, Popover } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Popover
      variant="inverse"
      title="Share this view"
      placement="bottom-start"
      trigger={<Button variant="inverse">Share</Button>}
    >
      Anyone in the workspace can open this link.
    </Popover>
  )
}

Props

Prop	Type	Default	Description
trigger*	ReactElement<unknown, string | JSXElementConstructor<any>>	-	The element that opens the panel: a Button or IconButton.
title	ReactNode	-	Optional heading. Without it, pass aria-label.
variant	"inverse" | "surface"	surface	surface (default) or inverse, the dark glass panel used for the profile menu.
placement	"bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end"	bottom-end	Where it opens relative to the trigger. Default: bottom-end.
aria-label	string	-
className	string	-
open	boolean	-	The controlled open state of the popover
defaultOpen	boolean	-	The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
onOpenChange	((details: OpenChangeDetails) => void)	-	Function invoked when the popover opens or closes

The remaining props of Ark UI’s Popover.Root are accepted too.

Accessibility and usage

• title names the panel. Without a title, pass aria-label.
• The default placement is bottom-end.
• The content is mounted when the popover opens and removed when it closes.
• Escape and a click outside close it; focus returns to the trigger.