Plus UI ↗️ Be Our Sponsor ↗️

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.

Properties

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

SizeStatusOrientation

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.

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,
};

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.

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,
};

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.

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,
};

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.

CriteriaDescriptionStatus

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

API

PropertyDescriptionTypeAccepted ValuesDefault

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

PreviousModalNextPopover

Last updated