Popconfirm

A Popconfirm can be used to display informative content to get verification

The Popconfirm Component is an interactive tool designed to verify user actions before they're finalized. Ideal for confirming deletions, submissions, or any significant step, it enhances user experience by preventing accidental decisions and ensuring deliberate actions.

Anatomy

This component features a trigger (usually a button), a floating confirmation dialog that appears upon interaction, containing a message area, confirm and cancel buttons, and optionally, an icon for added emphasis.

anatomy of popconfirm component

Properties

The Popconfirm Component offers various properties to customize its appearance and functionality, ensuring it fits seamlessly into any application or workflow.

Size	Status	Orientation
Small	Success	Right - Middle
Medium	Info	Right - Up
Large	Error	Right - Down
	Warning	Left - Middle
	Attention	Left - Up
		Left - Down
		Top - Left
		Top - Right
		Top - Middle
		Bottom - Middle
		Bottom - Left
		Bottom - Right

Size

• Small size popconfirm component is a compact design for brief messages.

• Medium size popcobfirm component is Balanced size for most applications.

• Large size popconfirm component is expanded view for detailed confirmation messages.

React

import React from 'react';
import { PlusPopconfirm, PlusButton } from '@plusui/react';

// Small Size Popconfirm
const PopconfirmSmall = () => (
  <PlusPopconfirm
    size="sm"
    title="Delete File?"
    description="Are you sure you want to delete this file? This action cannot be undone."
    status="warning"
    trigger="click"
  >
    <PlusButton status="error">Delete File</PlusButton>
  </PlusPopconfirm>
);

// Medium Size Popconfirm
const PopconfirmMedium = () => (
  <PlusPopconfirm
    size="md"
    title="Send Email?"
    description="Are you sure you want to send this email? You won't be able to edit it afterwards."
    status="info"
    trigger="click"
  >
    <PlusButton>Send Email</PlusButton>
  </PlusPopconfirm>
);

// Large Size Popconfirm
const PopconfirmLarge = () => (
  <PlusPopconfirm
    size="lg"
    title="Submit Form?"
    description="Are you sure you want to submit this form? Please check your inputs before proceeding."
    status="primary"
    trigger="click"
  >
    <PlusButton>Submit Form</PlusButton>
  </PlusPopconfirm>
);

export default {
  PopconfirmSmall,
  PopconfirmMedium,
  PopconfirmLarge,
};

Angular

<!-- Small Size Popconfirm -->
<plus-popconfirm
  size="sm"
  title="Delete File?"
  description="Are you sure you want to delete this file? This action cannot be undone."
  status="warning"
  trigger="click"
>
  <plus-button status="error">Delete File</plus-button>
</plus-popconfirm>

<!-- Medium Size Popconfirm -->
<plus-popconfirm
  size="md"
  title="Send Email?"
  description="Are you sure you want to send this email? You won't be able to edit it afterwards."
  status="info"
  trigger="click"
>
  <plus-button>Send Email</plus-button>
</plus-popconfirm>

<!-- Large Size Popconfirm -->
<plus-popconfirm
  size="lg"
  title="Submit Form?"
  description="Are you sure you want to submit this form? Please check your inputs before proceeding."
  status="primary"
  trigger="click"
>
  <plus-button>Submit Form</plus-button>
</plus-popconfirm>

Vue

<template>
  <!-- Small Size Popconfirm -->
  <plus-popconfirm
    size="sm"
    title="Delete File?"
    description="Are you sure you want to delete this file? This action cannot be undone."
    status="warning"
    trigger="click"
  >
    <plus-button status="error">Delete File</plus-button>
  </plus-popconfirm>

  <!-- Medium Size Popconfirm -->
  <plus-popconfirm
    size="md"
    title="Send Email?"
    description="Are you sure you want to send this email? You won't be able to edit it afterwards."
    status="info"
    trigger="click"
  >
    <plus-button>Send Email</plus-button>
  </plus-popconfirm>

  <!-- Large Size Popconfirm -->
  <plus-popconfirm
    size="lg"
    title="Submit Form?"
    description="Are you sure you want to submit this form? Please check your inputs before proceeding."
    status="primary"
    trigger="click"
  >
    <plus-button>Submit Form</plus-button>
  </plus-popconfirm>
</template>

Javascript

<!-- Small Size Popconfirm -->
<plus-popconfirm
  size="sm"
  title="Delete File?"
  description="Are you sure you want to delete this file? This action cannot be undone."
  status="warning"
  trigger="click"
>
  <plus-button status="error">Delete File</plus-button>
</plus-popconfirm>

<!-- Medium Size Popconfirm -->
<plus-popconfirm
  size="md"
  title="Send Email?"
  description="Are you sure you want to send this email? You won't be able to edit it afterwards."
  status="info"
  trigger="click"
>
  <plus-button>Send Email</plus-button>
</plus-popconfirm>

<!-- Large Size Popconfirm -->
<plus-popconfirm
  size="lg"
  title="Submit Form?"
  description="Are you sure you want to submit this form? Please check your inputs before proceeding."
  status="primary"
  trigger="click"
>
  <plus-button>Submit Form</plus-button>
</plus-popconfirm>

Status

• Success status popconfirm component indicates a successful action needing confirmation.

• Info status popconfirm component provides information requiring user acknowledgment.

• Error status popconfirm component alerts to an error that needs user confirmation to proceed.

• Warning status popconfirm component warns the user about potential risks or consequences.

• Attention status popconfirm component draws attention to critical information or choices.

React

import React from 'react';
import { PlusPopconfirm, PlusButton } from '@plusui/react';

// Success Status
const PopconfirmSuccess = () => (
  <PlusPopconfirm
    status="success"
    title="Action Successful"
    description="Your action has been successfully completed."
    trigger="click"
  >
    <PlusButton>Continue</PlusButton>
  </PlusPopconfirm>
);

// Warning Status
const PopconfirmWarning = () => (
  <PlusPopconfirm
    status="warning"
    title="Are You Sure?"
    description="This action could have unintended consequences. Proceed with caution."
    trigger="click"
  >
    <PlusButton>Proceed</PlusButton>
  </PlusPopconfirm>
);

// Error Status
const PopconfirmError = () => (
  <PlusPopconfirm
    status="error"
    title="Action Failed"
    description="An error occurred during the process. Please try again."
    trigger="click"
  >
    <PlusButton>Retry</PlusButton>
  </PlusPopconfirm>
);

// Info Status
const PopconfirmInfo = () => (
  <PlusPopconfirm
    status="info"
    title="Information"
    description="Here's some important information you should know."
    trigger="click"
  >
    <PlusButton>Got It</PlusButton>
  </PlusPopconfirm>
);

// Default Status
const PopconfirmDefault = () => (
  <PlusPopconfirm
    status="default"
    title="Confirmation Needed"
    description="Are you sure you want to proceed with this action?"
    trigger="click"
  >
    <PlusButton>Confirm</PlusButton>
  </PlusPopconfirm>
);

export default {
  PopconfirmSuccess,
  PopconfirmWarning,
  PopconfirmError,
  PopconfirmInfo,
  PopconfirmDefault,
};

Angular

<!-- Success Status -->
<plus-popconfirm
  status="success"
  title="Action Successful"
  description="Your action has been successfully completed."
  trigger="click"
>
  <plus-button>Continue</plus-button>
</plus-popconfirm>  <!-- Success state -->

<!-- Warning Status -->
<plus-popconfirm
  status="warning"
  title="Are You Sure?"
  description="This action could have unintended consequences. Proceed with caution."
  trigger="click"
>
  <plus-button>Proceed</plus-button>
</plus-popconfirm>  <!-- Warning state -->

<!-- Error Status -->
<plus-popconfirm
  status="error"
  title="Action Failed"
  description="An error occurred during the process. Please try again."
  trigger="click"
>
  <plus-button>Retry</plus-button>
</plus-popconfirm>  <!-- Error state -->

<!-- Info Status -->
<plus-popconfirm
  status="info"
  title="Information"
  description="Here's some important information you should know."
  trigger="click"
>
  <plus-button>Got It</plus-button>
</plus-popconfirm>  <!-- Info state -->

<!-- Default Status -->
<plus-popconfirm
  status="default"
  title="Confirmation Needed"
  description="Are you sure you want to proceed with this action?"
  trigger="click"
>
  <plus-button>Confirm</plus-button>
</plus-popconfirm>  <!-- Default state -->

Vue

<template>
  <!-- Success Status -->
  <plus-popconfirm
    status="success"
    title="Action Successful"
    description="Your action has been successfully completed."
    trigger="click"
  >
    <plus-button>Continue</plus-button>
  </plus-popconfirm>  <!-- Success state -->

  <!-- Warning Status -->
  <plus-popconfirm
    status="warning"
    title="Are You Sure?"
    description="This action could have unintended consequences. Proceed with caution."
    trigger="click"
  >
    <plus-button>Proceed</plus-button>
  </plus-popconfirm>  <!-- Warning state -->

  <!-- Error Status -->
  <plus-popconfirm
    status="error"
    title="Action Failed"
    description="An error occurred during the process. Please try again."
    trigger="click"
  >
    <plus-button>Retry</plus-button>
  </plus-popconfirm>  <!-- Error state -->

  <!-- Info Status -->
  <plus-popconfirm
    status="info"
    title="Information"
    description="Here's some important information you should know."
    trigger="click"
  >
    <plus-button>Got It</plus-button>
  </plus-popconfirm>  <!-- Info state -->

  <!-- Default Status -->
  <plus-popconfirm
    status="default"
    title="Confirmation Needed"
    description="Are you sure you want to proceed with this action?"
    trigger="click"
  >
    <plus-button>Confirm</plus-button>
  </plus-popconfirm>  <!-- Default state -->
  
  <!-- Attention status -->
  <plus-popconfirm
    status="attention"
    title="Please Note"
    description="This action requires your full attention. Proceed with caution."
    trigger="click"
  >
    <plus-button>Proceed</plus-button>
  </plus-popconfirm> <!-- Attention status -->
</template>

Javascript

<!-- Success Status -->
<plus-popconfirm
  status="success"
  title="Action Successful"
  description="Your action has been successfully completed."
  trigger="click"
>
  <plus-button>Continue</plus-button>
</plus-popconfirm>
<!-- Success state -->

<!-- Warning Status -->
<plus-popconfirm
  status="warning"
  title="Are You Sure?"
  description="This action could have unintended consequences. Proceed with caution."
  trigger="click"
>
  <plus-button>Proceed</plus-button>
</plus-popconfirm>
<!-- Warning state -->

<!-- Error Status -->
<plus-popconfirm
  status="error"
  title="Action Failed"
  description="An error occurred during the process. Please try again."
  trigger="click"
>
  <plus-button>Retry</plus-button>
</plus-popconfirm>
<!-- Error state -->

<!-- Info Status -->
<plus-popconfirm
  status="info"
  title="Information"
  description="Here's some important information you should know."
  trigger="click"
>
  <plus-button>Got It</plus-button>
</plus-popconfirm>
<!-- Info state -->

<!-- Default Status -->
<plus-popconfirm
  status="default"
  title="Confirmation Needed"
  description="Are you sure you want to proceed with this action?"
  trigger="click"
>
  <plus-button>Confirm</plus-button>
</plus-popconfirm>
<!-- Default state -->

<plus-popconfirm
  status="attention"
  title="Please Note"
  description="This action requires your full attention. Proceed with caution."
  trigger="click"
>
  <plus-button>Proceed</plus-button>
</plus-popconfirm>
<!-- Attention status -->

Orientation

Specifies the position of the Popconfirm relative to the trigger element:

• Right - Middle popconfirm component aligns the center of the Popconfirm to the right.

• Right - Up popconfirm component aligns the Popconfirm above and to the right.

• Right - Down popconfirm component aligns the Popconfirm below and to the right.

• Left - Middle popconfirm component aligns the center of the Popconfirm to the left.

• Left - Up popconfirm component aligns the Popconfirm above and to the left.

• Left - Down popconfirm component aligns the Popconfirm below and to the left.

• Top - Middle popconfirm component centers the Popconfirm above the trigger.

• Top - Up popconfirm component positions the Popconfirm slightly above the center-top.

• Top - Down popconfirm component positions the Popconfirm just below the top alignment.

• Bottom - Middle popconfirm component centers the Popconfirm below the trigger.

• Bottom - Up popconfirm component positions the Popconfirm just above the bottom alignment.

• Bottom - Down popconfirm component positions the Popconfirm slightly below the center-bottom.

React

import React from 'react';
import { PlusPopconfirm, PlusButton } from '@plusui/react';

// Top Placement
const PopconfirmTop = () => (
  <PlusPopconfirm
    placement="top"
    title="Confirmation Needed"
    description="This action requires your approval."
    trigger="click"
  >
    <PlusButton>Top Placement</PlusButton>
  </PlusPopconfirm>
);

// Bottom Placement
const PopconfirmBottom = () => (
  <PlusPopconfirm
    placement="bottom"
    title="Confirmation Needed"
    description="Are you sure you want to proceed?"
    trigger="click"
  >
    <PlusButton>Bottom Placement</PlusButton>
  </PlusPopconfirm>
);

// Left Placement
const PopconfirmLeft = () => (
  <PlusPopconfirm
    placement="left"
    title="Confirmation Needed"
    description="Do you really want to perform this action?"
    trigger="click"
  >
    <PlusButton>Left Placement</PlusButton>
  </PlusPopconfirm>
);

// Right Placement
const PopconfirmRight = () => (
  <PlusPopconfirm
    placement="right"
    title="Confirmation Needed"
    description="Please confirm your action."
    trigger="click"
  >
    <PlusButton>Right Placement</PlusButton>
  </PlusPopconfirm>
);

export default {
  PopconfirmTop,
  PopconfirmBottom,
  PopconfirmLeft,
  PopconfirmRight,
};

Angular

<!-- Top Placement -->
<plus-popconfirm
  placement="top"
  title="Confirmation Needed"
  description="This action requires your approval."
  trigger="click"
>
  <plus-button>Top Placement</plus-button>
</plus-popconfirm>  <!-- Opens from the top -->

<!-- Bottom Placement -->
<plus-popconfirm
  placement="bottom"
  title="Confirmation Needed"
  description="Are you sure you want to proceed?"
  trigger="click"
>
  <plus-button>Bottom Placement</plus-button>
</plus-popconfirm>  <!-- Opens from the bottom -->

<!-- Left Placement -->
<plus-popconfirm
  placement="left"
  title="Confirmation Needed"
  description="Do you really want to perform this action?"
  trigger="click"
>
  <plus-button>Left Placement</plus-button>
</plus-popconfirm>  <!-- Opens from the left -->

<!-- Right Placement -->
<plus-popconfirm
  placement="right"
  title="Confirmation Needed"
  description="Please confirm your action."
  trigger="click"
>
  <plus-button>Right Placement</plus-button>
</plus-popconfirm>  <!-- Opens from the right -->

Vue

<template>
  <!-- Top Placement -->
  <plus-popconfirm
    placement="top"
    title="Confirmation Needed"
    description="This action requires your approval."
    trigger="click"
  >
    <plus-button>Top Placement</plus-button>
  </plus-popconfirm>  <!-- Opens from the top -->

  <!-- Bottom Placement -->
  <plus-popconfirm
    placement="bottom"
    title="Confirmation Needed"
    description="Are you sure you want to proceed?"
    trigger="click"
  >
    <plus-button>Bottom Placement</plus-button>
  </plus-popconfirm>  <!-- Opens from the bottom -->

  <!-- Left Placement -->
  <plus-popconfirm
    placement="left"
    title="Confirmation Needed"
    description="Do you really want to perform this action?"
    trigger="click"
  >
    <plus-button>Left Placement</plus-button>
  </plus-popconfirm>  <!-- Opens from the left -->

  <!-- Right Placement -->
  <plus-popconfirm
    placement="right"
    title="Confirmation Needed"
    description="Please confirm your action."
    trigger="click"
  >
    <plus-button>Right Placement</plus-button>
  </plus-popconfirm>  <!-- Opens from the right -->
</template>

Javascript

<!-- Success Status -->
<plus-popconfirm
  status="success"
  title="Action Successful"
  description="Your action has been successfully completed."
  trigger="click"
>
  <plus-button>Continue</plus-button>
</plus-popconfirm>
<!-- Success state -->

<!-- Warning Status -->
<plus-popconfirm
  status="warning"
  title="Are You Sure?"
  description="This action could have unintended consequences. Proceed with caution."
  trigger="click"
>
  <plus-button>Proceed</plus-button>
</plus-popconfirm>
<!-- Warning state -->

<!-- Error Status -->
<plus-popconfirm
  status="error"
  title="Action Failed"
  description="An error occurred during the process. Please try again."
  trigger="click"
>
  <plus-button>Retry</plus-button>
</plus-popconfirm>
<!-- Error state -->

<!-- Info Status -->
<plus-popconfirm
  status="info"
  title="Information"
  description="Here's some important information you should know."
  trigger="click"
>
  <plus-button>Got It</plus-button>
</plus-popconfirm>
<!-- Info state -->

<!-- Default Status -->
<plus-popconfirm
  status="default"
  title="Confirmation Needed"
  description="Are you sure you want to proceed with this action?"
  trigger="click"
>
  <plus-button>Confirm</plus-button>
</plus-popconfirm>
<!-- Default state -->

<plus-popconfirm
  status="attention"
  title="Please Note"
  description="This action requires your full attention. Proceed with caution."
  trigger="click"
>
  <plus-button>Proceed</plus-button>
</plus-popconfirm>
<!-- Attention status -->

Layout & Spacing

The Popconfirm Component is designed with clear spacing around the message and buttons, ensuring it's easy to read and interact with. Its layout is optimized for visibility without overwhelming the underlying content.

Light & Dark Mode

Supports both light and dark modes, adapting to the application's theme to maintain consistency and reduce visual strain.

Accessibility

Accessibility features include keyboard navigation, screen reader support, and ARIA attributes, making sure the confirmation process is inclusive and straightforward for all users.

Criteria	Description	Status
ARIA Role	Ensures role attribute has an appropriate value for the element	✔️ Passed
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
ID Attributes	Ensures every id attribute value is unique	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
size	Sets the size of the popconfirm	String	sm, md, lg	md
placement	Determines the position of the popconfirm	String	top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end	top
showArrow	Shows or hides the arrow	Boolean	true, false	true
title	The title of the popconfirm	String	Any valid string	null
description	A description providing more context	String	Any valid string	null
status	The status of the popconfirm	String	success, warning, error, info, default, primary, attention	primary
okText	Text for the confirmation button	String	Any valid string	Confirm
cancelText	Text for the cancellation button	String	Any valid string	Cancel
trigger	Defines how the popconfirm is triggered	String	click, manual	click
prefixIcon	Custom icon for the popconfirm	String	Any valid icon class	Depends on status