Inline Confirm
betaA destructive button that asks in place — it widens into Keep / Delete, or opens a bin's lid beside a check and a cross, then offers a timed Undo.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
pnpm dlx @dowel-ui/cli add inline-confirmnpm packages installed: class-variance-authority.
import { InlineConfirm } from "@/components/ui/inline-confirm";Default
Gallery
Custom Labels
Icon
Icon Without Undo
Icon Shapes
<InlineConfirm>
| Prop | Type | Default |
|---|---|---|
announcementAnnounced when confirmed. Defaults to | string | — |
cancelLabelThe safe answer, focused when asking. The icon variant's cross is named by it. | ReactNode | "Keep" |
confirmLabelThe destructive answer. The icon variant's check is named by it. | ReactNode | "Delete" |
disabledDisables the trigger. | boolean | — |
doneLabelShown once confirmed. | ReactNode | "Deleted" |
iconLeading icon on the trigger. Defaults to a bin; | ReactNode | — |
labelThe trigger's text, e.g. "Delete file". Also names the group. | ReactNode | "Delete file" |
onConfirmCalled when the destructive answer is chosen. | () => void | — |
onPhaseChangeCalled on every phase change. | (phase: InlineConfirmPhase) => void | — |
onUndoCalled when Undo is pressed within the window. | () => void | — |
shape | "pill" | "rounded" | "square" | "pill" |
stroke | boolean | — |
undoLabel | ReactNode | "Undo" |
undoWindowMilliseconds the undo stays available. It pauses while keyboard focus is inside. With the icon variant, | number | 4000 |
variant | "default" | "icon" | "default" |
Plus every attribute of <div> except children.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes