PhiaUi.Components.Popconfirm (phia_ui v0.1.17)

Popconfirm — inline confirmation popup attached to a trigger element.

Inspired by Ant Design Popconfirm. Uses Phoenix JS.toggle/1 — no custom JS hook. Shows a small panel with a warning icon, title, optional description, and confirm/cancel buttons.

Examples

<.popconfirm id="delete-confirm" title="Delete this item?" placement={:top}>
  <:trigger>
    <.button variant={:destructive}>Delete</.button>
  </:trigger>
</.popconfirm>

<.popconfirm
  id="archive-confirm"
  title="Archive record?"
  description="This action can be undone later."
  confirm_label="Archive"
  cancel_label="Keep"
  placement={:bottom}
>
  <:trigger><.button>Archive</.button></:trigger>
</.popconfirm>

Summary

Functions

popconfirm(assigns)

Renders an inline confirmation popup anchored to a trigger element.

Functions

popconfirm(assigns)

Renders an inline confirmation popup anchored to a trigger element.

When the trigger is clicked, Phoenix JS.toggle/1 shows a small floating panel containing:

A warning icon (triangle-alert in amber)
The confirmation title and optional description
A cancel button and a confirm button

The panel is positioned relative to the trigger using the placement attr:

`:placement`	Panel appears
`:top`	Above the trigger
`:bottom`	Below the trigger
`:left`	To the left
`:right`	To the right

Clicking the cancel button hides the panel via JS.hide. The confirm button does not have a built-in action — add phx-click inside the slot or via :rest to fire a LiveView event:

<.button slot_here phx-click="confirm_delete">Yes, delete</.button>

Examples

<%!-- Destructive delete with default confirm/cancel labels --%>
<.popconfirm id="delete-confirm" title="Delete this item?">
  <:trigger>
    <.button variant={:destructive}>Delete</.button>
  </:trigger>
</.popconfirm>

<%!-- Non-destructive archive with custom labels --%>
<.popconfirm
  id="archive-confirm"
  title="Archive record?"
  description="This can be undone later from the archive."
  confirm_label="Archive"
  cancel_label="Keep"
  confirm_variant={:default}
  placement={:bottom}
>
  <:trigger><.button variant={:outline}>Archive</.button></:trigger>
</.popconfirm>

Attributes

id (:string) (required) - Unique ID — used to reference the panel via JS.toggle.
title (:string) (required) - Confirmation question shown in the panel header.
description (:string) - Optional secondary description. Defaults to nil.
placement (:atom) - Position of the panel relative to the trigger. Defaults to :top. Must be one of :top, :bottom, :left, or :right.
confirm_label (:string) - Label for the confirm button. Defaults to "Yes".
cancel_label (:string) - Label for the cancel button. Defaults to "No".
confirm_variant (:atom) - Button variant for confirm action. Defaults to :destructive.
class (:string) - Additional CSS classes for the root element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <div>.

Slots

trigger (required) - Element that opens the popconfirm panel on click.