Popconfirm

Small inline confirmation popover attached to a trigger button. The size prop (xs, sm, md, lg, xl) sets the trigger button and panel density.

Jump to API reference

Import

Vue

import { UiPopconfirm } from '@ziyarago/ui/vue'

Danger

Vue

<UiPopconfirm label="Delete guest" title="Delete this guest?" />

Primary

Vue

<UiPopconfirm
  label="Send invoice"
  title="Send invoice now?"
  variant="primary"
 />

Custom labels

Vue

<UiPopconfirm
  label="Cancel booking"
  title="Cancel this booking?"
  confirm-label="Cancel booking"
  cancel-label="Keep it"
 />

Sizes

Vue

<UiPopconfirm size="xs" label="Delete guest" title="Delete this guest?" />

<UiPopconfirm size="sm" label="Delete guest" title="Delete this guest?" />

<UiPopconfirm size="md" label="Delete guest" title="Delete this guest?" />

<UiPopconfirm size="lg" label="Delete guest" title="Delete this guest?" />

<UiPopconfirm size="xl" label="Delete guest" title="Delete this guest?" />

API reference

Button that opens a small confirmation popover with cancel/confirm buttons (No/Yes by default); use for quick inline confirmation of a single action.

Props

PropType and valuesDefaultDescription

labelstring—Text of the trigger button.

titlestring—Question shown in the popover.

variantprimarysecondaryghostdangerinversetonaloutlinedtextelevated'danger'Button variant of the trigger.

confirmLabelstring'Yes'Text of the confirm button.

cancelLabelstring'No'Text of the cancel button.

sizexssmmdlgxl'sm'Scale of trigger button and popover.

Events

Vue: @name. React: onName.

confirmCalled when the confirm button is clicked; the popover closes first.

Notes

Open state is internal. The popover closes on outside click and on Escape.