Popconfirm

A simple confirmation dialog triggered by a click action.

Import

import { Popconfirm } from 'asterui'

Examples

Basic

Simple popconfirm with title.

</>

Delete

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleDelete = () => {
    notification.success({
      message: 'Deleted',
      description: 'The item has been deleted successfully.',
    });
  };
  
  return (
      <Popconfirm title="Are you sure?" onConfirm={handleDelete}>
        <Button color="error">Delete</Button>
      </Popconfirm>
    )
}

export default App

With Description

Add a description for more context.

</>

Delete

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleDelete = () => {
    notification.success({
      message: 'Deleted',
      description: 'The item has been deleted successfully.',
    });
  };
  
  return (
      <Popconfirm
        title="Delete this task?"
        description="This action cannot be undone. Are you sure you want to continue?"
        onConfirm={handleDelete}
      >
        <Button color="error">Delete</Button>
      </Popconfirm>
    )
}

export default App

Placements

Popconfirm can be placed in different positions.

</>

Top

Right

Bottom

Left

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <Popconfirm title="Delete?" placement="top">
          <Button>Top</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="right">
          <Button>Right</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="bottom">
          <Button>Bottom</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="left">
          <Button>Left</Button>
        </Popconfirm>
      </div>
    )
}

export default App

Custom Text

Customize button text and types.

</>

Submit

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  return (
      <Popconfirm
        title="Confirm submission?"
        okText="Yes, submit"
        cancelText="No, cancel"
        okType="success"
        cancelType="error"
        onConfirm={() => {
          notification.success({ message: 'Submitted!', description: 'Form submitted successfully.' });
        }}
      >
        <Button color="primary">Submit</Button>
      </Popconfirm>
    )
}

export default App

Async Confirm

Handle async operations with loading state.

</>

Delete (Async)

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleAsyncDelete = () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        notification.success({
          message: 'Deleted',
          description: 'The item has been deleted after async operation.',
        });
        resolve();
      }, 2000);
    });
  };
  
  return (
      <Popconfirm
        title="Delete this item?"
        description="This will take a moment..."
        onConfirm={handleAsyncDelete}
      >
        <Button color="error">Delete (Async)</Button>
      </Popconfirm>
    )
}

export default App

Custom Icon

Customize or hide the icon.

</>

Custom Icon

No Icon

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Popconfirm title="Delete this?" icon={<span className="text-2xl">🗑️</span>}>
          <Button>Custom Icon</Button>
        </Popconfirm>
        <Popconfirm title="Proceed?" icon={null}>
          <Button>No Icon</Button>
        </Popconfirm>
      </div>
    )
}

export default App

No Cancel Button

Hide the cancel button for acknowledgment-only confirmations.

</>

Show Info

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <Popconfirm
        title="Acknowledge this message"
        description="Click OK to dismiss."
        showCancel={false}
        okText="Got it"
      >
        <Button color="info">Show Info</Button>
      </Popconfirm>
    )
}

export default App

Disabled

Disabled popconfirm.

</>

Disabled

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <Popconfirm title="Are you sure?" disabled>
        <Button disabled>Disabled</Button>
      </Popconfirm>
    )
}

export default App

API

Popconfirm

Property	Description	Type	Default
children	Trigger element	React.ReactElement	-
title	Title of the confirmation	React.ReactNode	-
description	Description text	React.ReactNode	-
onConfirm	Callback when confirmed (supports async)	() => void | Promise<void>	-
onCancel	Callback when cancelled	() => void	-
okText	Text for confirm button	string	'OK'
cancelText	Text for cancel button	string	'Cancel'
okType	Button type for confirm button	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'	'primary'
cancelType	Button type for cancel button	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'ghost'	'ghost'
placement	Placement of the confirmation popup	'top' | 'bottom' | 'left' | 'right'	'top'
disabled	Whether the popconfirm is disabled	boolean	false
icon	Custom icon (null to hide default)	React.ReactNode	-
showCancel	Show cancel button	boolean	true
data-testid	Test ID prefix for child elements	string	-

Accessibility

• Focus is trapped within the popconfirm when open
• Escape key closes the popconfirm
• Buttons are keyboard accessible
• Loading state is communicated via aria-busy