ui/PopoverButton.svelte

Button + popover composition for the common toggle-on-click pattern.

Wraps a Popover instance with a <button>, a positioned content area, and scale transitions. Spreads extra props onto the button element. Pass popover_content for the popover body, and either children for simple button content or button for a fully custom trigger — both receive the Popover instance.

@example

<PopoverButton position="bottom" align="center"> {#snippet popover_content(popover)} <div class="box p_md"> <button type="button" onclick={() => popover.hide()}>close</button> </div> {/snippet} open menu </PopoverButton>

@example

<!-- custom trigger via the `button` snippet --> <PopoverButton position="right" align="start" disable_outside_click> {#snippet popover_content(popover)} <form onsubmit={() => popover.hide()}> <input name="search" /> <button type="submit">go</button> </form> {/snippet} {#snippet button(popover)} <button type="button" class="icon_button" {@attach popover.trigger()}> search </button> {/snippet} </PopoverButton>

@see ConfirmButton for a higher-level wrapper with confirmation semantics

Declarations
#

view source

PopoverButton
#

ui/PopoverButton.svelte view source

position?

type Position | undefined
optional

align?

type Alignment | undefined
optional

disable_outside_click?

type boolean | undefined
optional

popover_class?

type string | undefined
optional

popover_attrs?

type SvelteHTMLElements['div'] | undefined
optional

popover_content

type Snippet<[popover: Popover]>

popover_container_attrs?

type SvelteHTMLElements['div'] | undefined
optional

button?

type Snippet<[popover: Popover]> | undefined
optional

children?

type Snippet<[popover: Popover]> | undefined
optional

Depends on
#

Imported by
#