Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Sheet Bottom Confirm

ProNew

A phone confirmation in a bottom sheet with full-width thumb-sized buttons, Cancel focused first, a locked state while working and a failure shown without closing.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

children

title, description

confirmLabel

destructive

Guide and examples

When to use it

Use this on touch layouts where a centred dialog is awkward to reach: deleting a photo, leaving a group, sending a payment.

Do not use it on desktop-only layouts (use an alert dialog) or for forms.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

SheetBottomConfirm

Prop	Type	Default	Description
`children`	`ReactNode`	-	The trigger.
`title, description`	`string`	-	Sheet text.
`confirmLabel`	`string`	-	Label of the confirm button.
`onConfirm`	`() => void \| Promise<void>`	-	Runs the action; a rejection shows its message.
`destructive`	`boolean`	`true`	Use the destructive style.

Accessibility

Cancel takes initial focus, so a reflex Enter never confirms.
The sheet is titled and described; the confirm button shows "Working..." and the sheet cannot be dismissed while it runs.
A failure is a role="alert" in the sheet and the buttons come back, so the person can try again or cancel.

Keyboard

Key	Action
Enter on the focused Cancel	closes
Tab	to the confirm button
Escape	closes

Testing

The pattern ships a Testing Library test (sheet-bottom-confirm.test.tsx) that covers the described dialog and focus, confirming, cancelling and failure.