## Inline Confirm (S—064)

A delete button that grows into “Sure? Cancel / Delete” in place, then settles on a check.

- URL: https://sundaeui.dev/components/inline-confirm
- Category: UI components · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/inline-confirm.json`
- Tags: destructive, undo, confirm, delete, inline, button

The resting button widens into a question with Cancel and Delete side by side, so a destructive action gets a second look without a modal stealing the page.
Focus lands on Cancel, the safe choice. Escape backs out. After confirming, a check and “Deleted” show for a moment and the button returns.

### Usage

```tsx
import { InlineConfirm } from '@/components/sundae/inline-confirm'

<InlineConfirm label="Delete file" question="Delete file?" onConfirm={() => remove(id)} />
```

### Props

- `label` (`string`, default `'Delete'`): Resting button text.
- `question` (`string`, default `'Delete file?'`): Shown while asking; also the group label.
- `confirmLabel / cancelLabel` (`string`, default `'Delete' / 'Cancel'`): Button texts.
- `doneLabel` (`string`, default `'Deleted'`): Shown and announced after confirming.
- `onConfirm` (`() => void`): Runs on confirm.
- `resetAfter` (`number`, default `2`): Seconds before returning to rest. 0 keeps the done state.
- `shape` (`'pill' | 'rounded'`, default `'pill'`): Corner style.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Deleting a row, file or draft that can be recreated or undone.
- Dense lists where a modal for every delete is too heavy.

### When not to use

- Irreversible actions with wide impact (deleting an account): use a dialog that asks for the name.
- Actions that are not destructive: just do them.

### Accessibility

- Opening moves focus to Cancel; cancelling or finishing returns it to the trigger.
- The question labels the button group, and a polite live region announces the done state.
- Reduced motion removes the width and slide animation.

### Keyboard

- Enter / Space: Ask, then confirm or cancel
- Tab: Move between Cancel and Delete
- Escape: Back out without deleting

### FAQ

**Why does focus go to Cancel?**
A double press on Enter should never delete by accident. Landing on the safe option makes the second press a cancel.

**Can I add undo instead?**
Yes. Keep resetAfter at 0 and render your own Undo link next to the done state.