Popover

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Show brief details or a secondary task next to a button. Group Title and Description with Stack gap={1}. Group inputs and action buttons with Stack gap={4}. Lay out the button row with Inline gap={2}. Remove default child margins so the parent gap owns the spacing.

Don't use Popover for required responses or data-loss confirmation. Use AlertDialog instead. Don't put inputs in a Tooltip. Use a Popover instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → Trigger + Content(Portal + Positioner + Popup) → Title / Description / Close

Keyboard and accessibility

The Trigger opens the popover and moves focus inside. Escape closes it and returns focus to the Trigger. An outside click closes it and leaves focus where the click put it.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Popover, Button } from '@surflane/ui'

<Popover.Root>
  <Popover.Trigger render={<Button />}>Inspect</Popover.Trigger>
  <Popover.Content>
    <Popover.Title>Account</Popover.Title>
    <Popover.Description>Preview details.</Popover.Description>
  </Popover.Content>
</Popover.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens