Popconfirm

A confirmation box that appears when an element is clicked.

Basic Usage

The most basic usage.

Are you sure you want to delete this task?
<prism-button [prismPopconfirmTrigger]="confirm">Delete</prism-button>
<prism-popconfirm #confirm title="Are you sure you want to delete this task?" (confirmed)="onConfirm()" (cancelled)="onCancel()">
</prism-popconfirm>

Placement

Support 12 placements.

Confirm Left?
Confirm Top?
Confirm Bottom?
Confirm Right?
<prism-space>
  <prism-button [prismPopconfirmTrigger]="confirmLeft" placement="left">Left</prism-button>
  <prism-button [prismPopconfirmTrigger]="confirmTop" placement="top">Top</prism-button>
  <prism-button [prismPopconfirmTrigger]="confirmBottom" placement="bottom">Bottom</prism-button>
  <prism-button [prismPopconfirmTrigger]="confirmRight" placement="right">Right</prism-button>
</prism-space>

<prism-popconfirm #confirmLeft title="Confirm Left?"></prism-popconfirm>
<prism-popconfirm #confirmTop title="Confirm Top?"></prism-popconfirm>
<prism-popconfirm #confirmBottom title="Confirm Bottom?"></prism-popconfirm>
<prism-popconfirm #confirmRight title="Confirm Right?"></prism-popconfirm>

Custom Text

Customizing button labels.

Change status to 'Done'?
<prism-button [prismPopconfirmTrigger]="confirmCustom">Custom Text</prism-button>
<prism-popconfirm #confirmCustom 
  title="Change status to 'Done'?" 
  confirmText="Yes, Do it" 
  cancelText="Wait">
</prism-popconfirm>

Popconfirm APINameTypeDefaultDescription
titlestring | TemplateRef<any>-Title of the popconfirm.
contentstring | TemplateRef<any>-Content of the popconfirm.
iconstring | TemplateRef<any>-Custom icon name or template.
confirmTextstring'OK'Text of the confirm button.
cancelTextstring'Cancel'Text of the cancel button.
confirmButtonVariantPrismButtonVariant'primary'Variant of the confirm button.
cancelButtonVariantPrismButtonVariant'default'Variant of the cancel button.
confirmedEventEmitter<void>-Callback executed when confirmed.
cancelledEventEmitter<void>-Callback executed when cancelled.
Popconfirm Trigger APINameTypeDefaultDescription
prismPopconfirmTriggerPrismPopconfirmComponent-The Popconfirm component to trigger.
placementPrismPopoverPlacement'top'Position of the popconfirm.
triggerPrismPopoverTrigger'click'Trigger mode: click, hover, focus.

Name	Type	Default	Description
`title`	`string \| TemplateRef<any>`	`-`	Title of the popconfirm.
`content`	`string \| TemplateRef<any>`	`-`	Content of the popconfirm.
`icon`	`string \| TemplateRef<any>`	`-`	Custom icon name or template.
`confirmText`	`string`	`'OK'`	Text of the confirm button.
`cancelText`	`string`	`'Cancel'`	Text of the cancel button.
`confirmButtonVariant`	`PrismButtonVariant`	`'primary'`	Variant of the confirm button.
`cancelButtonVariant`	`PrismButtonVariant`	`'default'`	Variant of the cancel button.
`confirmed`	`EventEmitter<void>`	`-`	Callback executed when confirmed.
`cancelled`	`EventEmitter<void>`	`-`	Callback executed when cancelled.

Name	Type	Default	Description
`prismPopconfirmTrigger`	`PrismPopconfirmComponent`	`-`	The Popconfirm component to trigger.
`placement`	`PrismPopoverPlacement`	`'top'`	Position of the popconfirm.
`trigger`	`PrismPopoverTrigger`	`'click'`	Trigger mode: click, hover, focus.