Popconfirm Component
Small confirmation dialogs anchored to trigger buttons - perfect for delete confirmations and quick decisions
Basic Popconfirms
Compact Variant
Position Variants
Popconfirms automatically adjust position based on available space using Floating UI
Icon Variants
Different icon styles to indicate the severity of the action
Table with Popconfirms
Common use case: delete confirmations in data tables
| ID | Name | Status | Actions |
|---|---|---|---|
| 1 | John Doe | Active | |
| 2 | Jane Smith | Pending | |
| 3 | Bob Johnson | Inactive |
WebGrid Integration (Shadow DOM)
Live demo: single shared Popconfirm with @keenmate/web-grid inline toolbar — toolbar buttons live inside Shadow DOM, handled transparently since v1.5.1
Since v1.5.1, Popconfirm automatically handles triggers inside Shadow DOM (e.g. web-grid toolbar buttons). No extra code needed — just pass the trigger element from the event detail. Hover a row below and click the delete button to see it in action.
Key Points
- Single instance — one
<Popconfirm>for all rows, driven by reactive state - Shadow DOM — web-grid toolbar buttons live inside Shadow DOM; the
triggerElementfrom the event detail is passed directly and positioning works automatically - Dynamic callback — store the delete callback in state so
onconfirmcalls the right handler per row - No extra config — the Shadow DOM proxy (v1.5.1) creates a light-DOM mirror element for Floating UI positioning
Success