Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA dialog that asks why, with a live count of missing characters, and passes the trimmed reason to the action; use this when decisions go into an audit log.
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.
Use this when an action needs a recorded justification: refunds, account suspensions, overriding a review, granting access. The reason is passed to your handler so it can be stored.
Do not use it when the reason is not read by anyone: people will type filler. For a reason from a fixed set, use confirm-cancel-subscription style choices.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The trigger. |
onConfirm | (reason: string) => void | Promise<void> | - | Receives the trimmed reason. |
minLength | number | 10 | Fewest characters in the reason. |
title, description | ReactNode | - | Dialog text. |
actionLabel | string | Confirm | Label of the submit button. |
aria-describedby points to the live count ("3 more characters needed").| Key | Action |
|---|---|
| Enter in the form | submits when the reason is long enough |
| Escape | cancels |
The pattern ships a Testing Library test (confirm-with-reason.test.tsx) that covers the missing-character count, unlocking, trimming and closing, space-only input and the Enter key.