# `PhiaUi.Components.Popconfirm`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/popconfirm.ex#L1)

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>

# `popconfirm`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*