Popover

A neo-brutalist popover component for displaying floating content anchored to a trigger element. Built on reka-ui's PopoverRoot, supporting modal/non-modal modes and custom anchor positioning.

Demo

Preview

基础用法

对齐方式 (align)

偏移距离 (sideOffset=20)

Installation

pnpm dlx brutx-vue@latest add popover

Usage

<script setup>
import { PopoverRoot as Popover, PopoverTrigger, PopoverAnchor } from 'reka-ui'
import { PopoverContent, Button } from 'brutx-ui-vue'
</script>

<template>
    <Popover>
        <PopoverTrigger as-child>
            <Button variant="outline">Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
            <div class="grid gap-4">
                <div class="space-y-2">
                    <h4 class="font-black leading-none">Dimensions</h4>
                    <p class="text-sm text-brutal-muted-foreground">
                        Set the dimensions for the layer.
                    </p>
                </div>
            </div>
        </PopoverContent>
    </Popover>
</template>

Sub-components

Component	Description
Popover	Root component (re-exported from reka-ui's PopoverRoot)
PopoverTrigger	Button that opens the popover
PopoverContent	Popover content panel
PopoverAnchor	Anchor element for positioning

API Reference

Popover

Popover — Props

Name	Type	Default	Description
defaultOpen	boolean | undefined	—	The initial open state in uncontrolled mode; when omitted, the Reka UI primitive starts closed.
Details Declared type boolean | undefined Literal values false true Default value details Not declared — Source Popover.vue packages/ui/src/components/popover/Popover.vue
open	boolean | undefined	—	The controlled open state. Listen for update:open and update this prop to keep it in sync.
Details Declared type boolean | undefined Literal values false true Default value details Not declared — Source Popover.vue packages/ui/src/components/popover/Popover.vue
modal	boolean | undefined	—	Enables modal behavior, disabling interaction with outside elements and limiting screen-reader focus to the popover content.
Details Declared type boolean | undefined Literal values false true Default value details Not declared — Source Popover.vue packages/ui/src/components/popover/Popover.vue

Popover — Events

Name	Signature or type	Description
@update:open	[value: boolean]	Emits the new boolean open state for controlled usage.
Details Declared type [value: boolean] Literal values false true Source Popover.vue packages/ui/src/components/popover/Popover.vue

Popover — Slots

Name	Signature or type	Description
#default	{}	The trigger, content panel, and other Reka UI primitives inside the popover.
Details Declared type {} Source Popover.vue packages/ui/src/components/popover/Popover.vue

PopoverContent

PopoverContent — Props

Name	Type	Default	Description
align	"center" | "start" | "end" | undefined	"center"	The content panel alignment relative to its trigger.
Details Declared type "center" | "start" | "end" | undefined Literal values "center" "end" "start" Default value details Declaration 'center' Source: packages/ui/src/components/popover/PopoverContent.vue Resolved value "center" Source PopoverContent.vue:17 packages/ui/src/components/popover/PopoverContent.vue
sideOffset	number | undefined	8	The pixel gap between the content panel and its trigger.
Details Declared type number | undefined Default value details Declaration floatingContentSideOffsets.popover Source: packages/ui/src/components/popover/PopoverContent.vue Resolved value 8 Source PopoverContent.vue:18 packages/ui/src/components/popover/PopoverContent.vue
collisionPadding	number | Partial<Record<"right" | "bottom" | "left" | "top", number>> | undefined	8	The inset used for floating-content collision handling; accepts one number or per-side top/right/bottom/left values.
Details Declared type number | Partial<Record<"right" | "bottom" | "left" | "top", number>> | undefined Default value details Declaration floatingContentSideOffsets.popover Source: packages/ui/src/components/popover/PopoverContent.vue Resolved value 8 Source PopoverContent.vue:19 packages/ui/src/components/popover/PopoverContent.vue
class	string | undefined	undefined	CSS classes added to the Reka UI floating content element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/popover/PopoverContent.vue Resolved value undefined Source PopoverContent.vue:20 packages/ui/src/components/popover/PopoverContent.vue

PopoverContent — Slots

Name	Signature or type	Description
#default	{}	The content rendered inside the popover panel.
Details Declared type {} Source PopoverContent.vue packages/ui/src/components/popover/PopoverContent.vue

PopoverTrigger

PopoverTrigger — Props

Name	Type	Default	Description
asChild	boolean | undefined	—	Merges the trigger props and interaction behavior into its single child element.
Details Declared type boolean | undefined Literal values false true Default value details Not declared — Source PopoverTrigger.vue packages/ui/src/components/popover/PopoverTrigger.vue
as	AsTag | Component | undefined	—	Selects the HTML tag or component rendered as the trigger; the child determines the target when asChild is enabled.
Details Declared type AsTag | Component | undefined Literal values "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" Default value details Not declared — Source PopoverTrigger.vue packages/ui/src/components/popover/PopoverTrigger.vue

PopoverTrigger — Slots

Name	Signature or type	Description
#default	{}	The trigger content, usually a button or link.
Details Declared type {} Source PopoverTrigger.vue packages/ui/src/components/popover/PopoverTrigger.vue

Reka UI Primitive Features

Popover wraps Reka UI’s PopoverRoot, while PopoverTrigger and PopoverContent wrap their corresponding primitives. Import PopoverAnchor from reka-ui. The API above lists members declared by the local components. PopoverContent forwards undeclared Vue attributes and event listeners to the Reka UI primitive, including openAutoFocus, closeAutoFocus, pointerDownOutside, interactOutside, escapeKeyDown, and focusOutside.

Accessibility

• Keyboard: Press Escape to close the popover
• ARIA Attributes: The popover uses role="dialog" semantics and automatically links aria-labelledby to the trigger
• Focus Management: The popover auto-focuses when opened
• Interaction Behavior: Clicking outside closes the popover; in modal mode, interaction with external elements is disabled

Relationship with Popconfirm

Popconfirm is essentially a Popover + confirm/cancel button combination. It internally uses Popover/PopoverTrigger/PopoverContent directly, adding a TriangleAlert warning icon and confirm/cancel button logic.

When to use Popconfirm

• Simple "confirm/cancel" binary operations
• Out-of-the-box usage without assembling buttons and events manually
• Consistent dangerous action confirmation experience

When to use Popover manually

• Custom button text, styling, or layout
• Complex content like forms or lists inside the popover
• Fine-grained control over open/close timing

<!-- Popconfirm: one-line confirm action -->
<Popconfirm title="Are you sure to delete?" @confirm="handleDelete">
    <Button variant="destructive">Delete</Button>
</Popconfirm>

<!-- Popover manual combination: fully custom -->
<Popover>
    <PopoverTrigger as-child>
        <Button variant="outline">Custom</Button>
    </PopoverTrigger>
    <PopoverContent>
        <!-- Any content: forms, lists, custom buttons, etc. -->
    </PopoverContent>
</Popover>