Popover

SPopover is a floating panel anchored to a trigger: it suits action menus, popover forms and interactive hints. It is built on Reka UI (portal, positioning, closing on Esc/outside click, focus management). The trigger goes into the #trigger slot (as-child), the content into the default slot.

Basic usage

Side and alignment

Modal mode

The modal prop blocks interaction with the background and enables a focus trap: while the panel is open, focus cannot leave it and the background is dimmed.

Elevation

The popover panel is raised to the third elevation level. flat removes the shadow, elevation sets a custom level; the radius is not affected — square controls it, see Elevation.

<template>
  <SPopover flat>
    <template #trigger>
      <SButton variant="outline">Filters</SButton>
    </template>
    Panel without a shadow.
  </SPopover>
</template>

API

Props

Name	Type	Default	Description
square	boolean	undefined	Square corners: removes the rounding (rounded by default).
side	| "right" | "left" | "top" | "bottom"	"bottom"	Side of the trigger the panel appears on.
align	"start" | "center" | "end"	"center"	Alignment along the chosen side.
side-offset	number	8	Offset from the trigger in pixels.
modal	boolean	false	Modal mode: blocks interaction with the background and enables a focus trap.
aria-label	string	undefined	Accessible name of the popover panel (aria-label).
flat	boolean	undefined	Removes the shadow. Overridden by the elevation prop when it is set.
elevation	0 | 1 | 2 | 3 | 4 | 5	undefined	Shadow level 0–5 (scale); 0 means no shadow. Overrides flat.
open	boolean	false	Whether the panel is open. Two-way binding via v-model:open.

Events

Name	Signature	Description
update:open	(value: boolean) => void	Emitted when open changes. Used for two-way binding (v-model:open).

Slots

Name	Description
trigger	Trigger element that opens the panel on click.
default	Popover panel content.