Confirm Popover

An "Are you sure?" that opens beside the button that asked, on Base UI Popover, instead of a dialog across the page. Destructive or neutral, it lands focus on Cancel, spins while an async confirm runs and can't be dismissed until it settles, then shows a failure in place. High-risk actions can require typing a name, and repeat ones can offer Don't ask again and then skip the question.

Tags: confirm popconfirm popover delete destructive inline are-you-sure base-ui
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

trigger*
React.ReactElement
The button that asks. It's rendered as the popover's trigger, so it must accept a ref and props.
title*
React.ReactNode
description
React.ReactNode
intent
ConfirmPopoverIntent
Default "destructive"
Red confirm button and warning icon (destructive), or the primary button and a question mark.
confirmLabel
React.ReactNode
Default intent === "destructive" ? "Delete" : "Confirm"
cancelLabel
React.ReactNode
Default "Cancel"
onConfirm*
(details: ConfirmDetails) => Promise<void> | void
Runs on confirm. While its promise is pending the button spins and the popover can't be dismissed; a rejection keeps it open with errorMessage.
onCancel
() => void
confirmText
string
For high-risk actions: the confirm button stays disabled until this exact text is typed.
dontAskAgain
boolean
Default false
Offers a "Don't ask again" checkbox; its value arrives in onConfirm.
skip
boolean
Default false
Skip the question and confirm straight away, e.g. once someone ticked "Don't ask again".
errorMessage
React.ReactNode
Default "That didn't work. Try again."
side
"top" | "right" | "bottom" | "left"
Default "bottom"
align
"start" | "center" | "end"
Default "end"
open
boolean
defaultOpen
boolean
Default false
onOpenChange
(open: boolean) => void
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Where the popover portals to. Pass an element to keep it inside a frame.
className
string

Props
			Description
trigger*	React.ReactElement	–	The button that asks. It's rendered as the popover's trigger, so it must accept a ref and props.
title*	React.ReactNode	–
description	React.ReactNode	–
intent	ConfirmPopoverIntent	"destructive"	Red confirm button and warning icon (`destructive`), or the primary button and a question mark.
confirmLabel	React.ReactNode	intent === "destructive" ? "Delete" : "Confirm"
cancelLabel	React.ReactNode	"Cancel"
onConfirm*	(details: ConfirmDetails) => Promise<void> \| void	–	Runs on confirm. While its promise is pending the button spins and the popover can't be dismissed; a rejection keeps it open with `errorMessage`.
onCancel	() => void	–
confirmText	string	–	For high-risk actions: the confirm button stays disabled until this exact text is typed.
dontAskAgain	boolean	false	Offers a "Don't ask again" checkbox; its value arrives in `onConfirm`.
skip	boolean	false	Skip the question and confirm straight away, e.g. once someone ticked "Don't ask again".
errorMessage	React.ReactNode	"That didn't work. Try again."
side	"top" \| "right" \| "bottom" \| "left"	"bottom"
align	"start" \| "center" \| "end"	"end"
open	boolean	–
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	–
container	HTMLElement \| React.RefObject<HTMLElement \| null> \| null	–	Where the popover portals to. Pass an element to keep it inside a frame.
className	string	–