Fluxo UIFluxo UIv0.4.1

Confirm Popover

A lightweight anchored popover for confirmations, alerts, and quick messages — without a full modal. Mount <ConfirmPopoverManager /> once at your app root, then use the Confirm static API from any click handler.

Setup

App root
import { ConfirmPopoverManager } from 'fluxo-ui';

function App() {
  return (
    <>
      <ConfirmPopoverManager />
      {/* rest of app */}
    </>
  );
}

Yes / No

Delete confirmation

Classic yes/no anchored to the clicked element.

Confirm.yesNo(
  e.currentTarget as HTMLElement,
  'Are you sure you want to delete this item?',
  () => handleDelete(),
  () => console.log('Cancelled'),
  { title: 'Delete Item', icon: TrashIcon }
);

Confirm with custom button text

Placement options

Click each button to see the popover in that position.

Confirm.confirm(
  e.currentTarget as HTMLElement,
  'Submit the form? All data will be saved.',
  () => handleSubmit(),
  undefined,
  { title: 'Submit Form', confirmText: 'Submit', cancelText: 'Not yet', placement: 'topLeft' }
);

Info / OK

Single-button informational popover

Confirm.ok(
  e.currentTarget as HTMLElement,
  'Your changes have been saved automatically.',
  undefined,
  { title: 'Auto-saved', icon: CheckCircleIcon, okText: 'Got it' }
);

Rich JSX message

ReactNode as message

The message prop accepts any React node for complex content.

Confirm.yesNo(
  e.currentTarget as HTMLElement,
  <div className="space-y-2">
    <p className="font-medium">This will permanently remove:</p>
    <ul className="list-disc list-inside text-xs">
      <li>All associated records</li>
      <li>Media files and attachments</li>
    </ul>
  </div>,
  () => handleDelete(),
  undefined,
  { title: 'Destructive Action', icon: WarningIcon }
);

Custom actions via Confirm.show()

Low-level API with custom action set

Confirm.show({
  target: e.currentTarget as HTMLElement,
  title: 'Choose action',
  message: 'What would you like to do with this record?',
  placement: 'auto',
  actions: [
    { label: 'Archive', variant: 'warning', layout: 'outlined', onClick: () => archive() },
    { label: 'Delete', variant: 'danger', layout: 'default', onClick: () => remove() },
  ],
});

API Reference

ConfirmPopoverOptions

targetreq
HTMLElement

The element the popover is anchored to (typically event.currentTarget)

messagereq
string | ReactNode

The body message. Supports plain strings or JSX for rich content.

title
string

Optional heading displayed at the top of the popover.

icon
ComponentType | ReactElement

Optional icon shown next to the title.

placement
'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'right' | 'auto'"auto"

Where to place the popover relative to the target. 'auto' picks the best position based on available space.

actionsreq
ConfirmPopoverAction[]

Buttons rendered in the footer. Each action has label, onClick, variant, and layout.

onClose
() => void

Called when the popover is dismissed via Escape key or an outside click.

headingLevel
1 | 2 | 3 | 4 | 5 | 6"3"

Heading element level used for the title (h1-h6) so it integrates with the page heading outline.

defaultActionIndex
number

Index of the action to auto-focus when the popover opens. Defaults to the first non-danger action when destructive variants exist, otherwise the last action.

Confirm static methods

Confirm.yesNo(target, message, onConfirm, onCancel?, options?)
method

Shows a popover with Yes / No buttons. Fires onConfirm on Yes, onCancel on No.

Confirm.confirm(target, message, onConfirm, onCancel?, options?)
method

Shows a popover with customisable Confirm / Cancel buttons. options accepts confirmText and cancelText.

Confirm.ok(target, message, onOk?, options?)
method

Shows an informational popover with a single OK button. options accepts okText.

Confirm.show(options)
method

Low-level method accepting a full ConfirmPopoverOptions object for maximum flexibility.

Confirm.close(id?)
method

Programmatically close a specific popover by id, or all popovers when called without arguments.

Features

Anchored Positioning

8 placement options with auto-fallback when space is constrained

Static API

Confirm.yesNo(), .confirm(), .ok(), and .show() methods callable from any handler

Rich JSX Messages

The message prop accepts any React node for complex, formatted content

Custom Actions

Fully configurable action buttons with variant and layout control

Dismiss on Outside Click

Automatically closes when clicking outside or pressing Escape

Manager Pattern

Mount ConfirmPopoverManager once at root — no prop drilling required

Accessibility

Focus trapping, ARIA roles, and keyboard dismiss support built in

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config