Confirm Morph

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import ConfirmMorph, ConfirmMorphTone from @prepared911/ui/confirm-morph. ConfirmMorphProps is ConfirmMorphOwnProps and the optional Undo pair, plus data-* attributes on the root.

Prop	Type	Default	Description
`label`	`LocalizedMessage`	required	Trigger label
`prompt`	`LocalizedMessage`	required	Prompt on the confirming face; announced
`confirmLabel`	`LocalizedMessage`	required	Confirm button
`cancelLabel`	`LocalizedMessage`	required	Cancel button
`pendingLabel`	`LocalizedMessage`	required	Pending face; announced
`doneLabel`	`LocalizedMessage`	required	Done face; announced
`errorLabel`	`LocalizedMessage`	required	Error face; announced
`retryLabel`	`LocalizedMessage`	required	Retry button on the error face
`undoLabel`	`LocalizedMessage`	none	Undo button on the done face; required with `onUndo`, not allowed without it
`onUndo`	`() => Promise<unknown> \| unknown`	none	Called when Undo is pressed
`onConfirm`	`() => Promise<unknown> \| unknown`	required	Runs on Confirm and Retry
`onCancel`	`() => void`	none	The prompt was cancelled
`onConfirmError`	`(error: unknown) => void`	none	`onConfirm` or `onUndo` rejected
`tone`	`ConfirmMorphTone`	`Neutral`	`Neutral` or `Destructive`
`size`	`ButtonSize`	`Large`	Control height; the buttons on other faces are Small
`leading`	`ReactNode`	none	Content before the trigger label
`disabled`	`boolean`	`false`	Disables the trigger
`id`	`string`	none	Root id
`className`	`string`	none	Class on the root
`ref`	`Ref<HTMLDivElement>`	none	Ref to the root

Exported from the component: ConfirmMorph, ConfirmMorphTone, and the types ConfirmMorphOwnProps, ConfirmMorphProps, and ConfirmMorphUndoProps.

Props

Name	Type	Default	Description
`cancelLabel`	`LocalizedMessage`	—	Label of the Cancel button.
`confirmLabel`	`LocalizedMessage`	—	Label of the Confirm button.
`doneLabel`	`LocalizedMessage`	—	Label on the done face. Announced when the face appears.
`errorLabel`	`LocalizedMessage`	—	Label on the error face. Announced when the face appears.
`label`	`LocalizedMessage`	—	Label of the trigger on the idle face.
`onConfirm`	`() => unknown`	—	Runs when Confirm or Retry is pressed. The control is pending until the returned promise settles: a resolved promise shows the done face, a rejected one (or a synchronous throw) shows the error face. A synchronous return counts as resolved. @returns A promise to wait for, or nothing
`pendingLabel`	`LocalizedMessage`	—	Label on the pending face. Announced when the face appears.
`prompt`	`LocalizedMessage`	—	Prompt on the confirming face. Announced when the face appears.
`retryLabel`	`LocalizedMessage`	—	Label of the Retry button on the error face.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`disabled`	`boolean`	`false`	Disables the trigger. Has no effect once the prompt is open.
`id`	`string`	—	Element id of the root.
`leading`	`ReactNode`	—	Content before the trigger label, usually an Icon.
`onCancel`	`(() => void)`	—	Called when the prompt is cancelled by Cancel, Escape, a press outside, or its timeout.
`onConfirmError`	`((error: unknown) => void)`	—	Called with whatever `onConfirm` rejected or threw, or `onUndo` rejected with, after the face has changed. @param error - The rejection reason
`onUndo`	`(() => unknown)`	—	Called when Undo is pressed. The control returns to idle at once; a rejection is reported to `onConfirmError`. @returns Anything; a promise is observed for rejection only
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`size`	`ButtonSize`	`ButtonSize.Large`	Height of the control. The buttons on the other faces are Small and sit inside it.
`tone`	`ConfirmMorphTone`	`ConfirmMorphTone.Neutral`	Emphasis.
`undoLabel`	`LocalizedMessage`	—	Label of the Undo button on the done face.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Confirm Morph / Usage

Confirm Morph / Accessibility

On this page

Props

Storybook

Confirm Morph

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import ConfirmMorph, ConfirmMorphTone from @prepared911/ui/confirm-morph. ConfirmMorphProps is ConfirmMorphOwnProps and the optional Undo pair, plus data-* attributes on the root.

Prop	Type	Default	Description
`label`	`LocalizedMessage`	required	Trigger label
`prompt`	`LocalizedMessage`	required	Prompt on the confirming face; announced
`confirmLabel`	`LocalizedMessage`	required	Confirm button
`cancelLabel`	`LocalizedMessage`	required	Cancel button
`pendingLabel`	`LocalizedMessage`	required	Pending face; announced
`doneLabel`	`LocalizedMessage`	required	Done face; announced
`errorLabel`	`LocalizedMessage`	required	Error face; announced
`retryLabel`	`LocalizedMessage`	required	Retry button on the error face
`undoLabel`	`LocalizedMessage`	none	Undo button on the done face; required with `onUndo`, not allowed without it
`onUndo`	`() => Promise<unknown> \| unknown`	none	Called when Undo is pressed
`onConfirm`	`() => Promise<unknown> \| unknown`	required	Runs on Confirm and Retry
`onCancel`	`() => void`	none	The prompt was cancelled
`onConfirmError`	`(error: unknown) => void`	none	`onConfirm` or `onUndo` rejected
`tone`	`ConfirmMorphTone`	`Neutral`	`Neutral` or `Destructive`
`size`	`ButtonSize`	`Large`	Control height; the buttons on other faces are Small
`leading`	`ReactNode`	none	Content before the trigger label
`disabled`	`boolean`	`false`	Disables the trigger
`id`	`string`	none	Root id
`className`	`string`	none	Class on the root
`ref`	`Ref<HTMLDivElement>`	none	Ref to the root

Exported from the component: ConfirmMorph, ConfirmMorphTone, and the types ConfirmMorphOwnProps, ConfirmMorphProps, and ConfirmMorphUndoProps.

Props

Name	Type	Default	Description
`cancelLabel`	`LocalizedMessage`	—	Label of the Cancel button.
`confirmLabel`	`LocalizedMessage`	—	Label of the Confirm button.
`doneLabel`	`LocalizedMessage`	—	Label on the done face. Announced when the face appears.
`errorLabel`	`LocalizedMessage`	—	Label on the error face. Announced when the face appears.
`label`	`LocalizedMessage`	—	Label of the trigger on the idle face.
`onConfirm`	`() => unknown`	—	Runs when Confirm or Retry is pressed. The control is pending until the returned promise settles: a resolved promise shows the done face, a rejected one (or a synchronous throw) shows the error face. A synchronous return counts as resolved. @returns A promise to wait for, or nothing
`pendingLabel`	`LocalizedMessage`	—	Label on the pending face. Announced when the face appears.
`prompt`	`LocalizedMessage`	—	Prompt on the confirming face. Announced when the face appears.
`retryLabel`	`LocalizedMessage`	—	Label of the Retry button on the error face.
`className`	`string`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`disabled`	`boolean`	`false`	Disables the trigger. Has no effect once the prompt is open.
`id`	`string`	—	Element id of the root.
`leading`	`ReactNode`	—	Content before the trigger label, usually an Icon.
`onCancel`	`(() => void)`	—	Called when the prompt is cancelled by Cancel, Escape, a press outside, or its timeout.
`onConfirmError`	`((error: unknown) => void)`	—	Called with whatever `onConfirm` rejected or threw, or `onUndo` rejected with, after the face has changed. @param error - The rejection reason
`onUndo`	`(() => unknown)`	—	Called when Undo is pressed. The control returns to idle at once; a rejection is reported to `onConfirmError`. @returns Anything; a promise is observed for rejection only
`ref`	`Ref<HTMLDivElement>`	—	Ref to the root element.
`size`	`ButtonSize`	`ButtonSize.Large`	Height of the control. The buttons on the other faces are Small and sit inside it.
`tone`	`ConfirmMorphTone`	`ConfirmMorphTone.Neutral`	Emphasis.
`undoLabel`	`LocalizedMessage`	—	Label of the Undo button on the done face.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Confirm Morph / Usage

Confirm Morph / Accessibility

On this page

Props

Storybook