Confirmation

API and Development

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

Import Confirmation, ConfirmationButton from @prepared911/ui/confirmation.

Confirmation and ConfirmationButton take the props below and nothing else: no native attributes, no ref, no style.

Confirmation

Prop	Type	Default	Notes
`children`	`ReactNode`	required	One or more `ConfirmationButton`
`acknowledgementLabel`	`LocalizedMessage`	required	Text for a choice without its own, and for a group that starts acknowledged
`acknowledgementIcon`	`Glyph`	`check`	Glyph before the acknowledgement
`acknowledged`	`boolean`		Controlled state; `false` after `true` offers the choices again
`onAcknowledge`	`(label: LocalizedMessage \| undefined) => void`		Once, on the first activated choice, before its `onConfirm`
`label`	`LocalizedMessage`		Names the group of choices
`className`	`string`		Appended to the root

ConfirmationButton

Must render inside a Confirmation; it throws otherwise.

Prop	Type	Default	Notes
`children`	`ReactNode`	required	Visible label
`intent`	`ButtonIntent`	neutral	Button intent
`variant`	`ButtonVariant`	soft	Button surface
`size`	`ButtonSize`	large	Button height
`icon`	`Glyph`		Decorative glyph before the label
`disabled`	`boolean`	`false`	Inert choice
`onConfirm`	`() => void`		Side effect, once
`acknowledgeLabel`	`LocalizedMessage`	the group's `acknowledgementLabel`	Text after this choice
`className`	`string`		Appended to the button

Exports

Confirmation, ConfirmationButton, and the types ConfirmationProps and ConfirmationButtonProps.

Props

Name	Type	Default	Description
`acknowledgementLabel`	`LocalizedMessage`	—	Text of the acknowledgement for a choice that sets no `acknowledgeLabel` of its own, and for a group that starts acknowledged, such as "Done". It is also what assistive technology hears when the choices are replaced.
`children`	`ReactNode`	—	The choices: one or more {@link ConfirmationButton }.
`acknowledged`	`boolean`	—	Whether a choice has been made (controlled). Passing `false` after `true` offers the choices again.
`acknowledgementIcon`	`Glyph`	—	Glyph before the acknowledgement. Defaults to a check.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`label`	`LocalizedMessage`	—	Accessible name of the group of choices, such as "Next step". It is not applied to the acknowledgement.
`onAcknowledge`	`((label: LocalizedMessage) => void)`	—	Runs once when the first choice is activated, before that choice's `onConfirm`, with the choice's `acknowledgeLabel`. It does not run for a group that starts acknowledged. @param label - The activated choice's `acknowledgeLabel`, when it has one

Storybook

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

DefaultOpens in a new tab

Confirmation / Usage

Confirmation / Accessibility

On this page

Confirmation

API and Development

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

Import Confirmation, ConfirmationButton from @prepared911/ui/confirmation.

Confirmation and ConfirmationButton take the props below and nothing else: no native attributes, no ref, no style.

Confirmation

Prop	Type	Default	Notes
`children`	`ReactNode`	required	One or more `ConfirmationButton`
`acknowledgementLabel`	`LocalizedMessage`	required	Text for a choice without its own, and for a group that starts acknowledged
`acknowledgementIcon`	`Glyph`	`check`	Glyph before the acknowledgement
`acknowledged`	`boolean`		Controlled state; `false` after `true` offers the choices again
`onAcknowledge`	`(label: LocalizedMessage \| undefined) => void`		Once, on the first activated choice, before its `onConfirm`
`label`	`LocalizedMessage`		Names the group of choices
`className`	`string`		Appended to the root

ConfirmationButton

Must render inside a Confirmation; it throws otherwise.

Prop	Type	Default	Notes
`children`	`ReactNode`	required	Visible label
`intent`	`ButtonIntent`	neutral	Button intent
`variant`	`ButtonVariant`	soft	Button surface
`size`	`ButtonSize`	large	Button height
`icon`	`Glyph`		Decorative glyph before the label
`disabled`	`boolean`	`false`	Inert choice
`onConfirm`	`() => void`		Side effect, once
`acknowledgeLabel`	`LocalizedMessage`	the group's `acknowledgementLabel`	Text after this choice
`className`	`string`		Appended to the button

Exports

Confirmation, ConfirmationButton, and the types ConfirmationProps and ConfirmationButtonProps.

Props

Name	Type	Default	Description
`acknowledgementLabel`	`LocalizedMessage`	—	Text of the acknowledgement for a choice that sets no `acknowledgeLabel` of its own, and for a group that starts acknowledged, such as "Done". It is also what assistive technology hears when the choices are replaced.
`children`	`ReactNode`	—	The choices: one or more {@link ConfirmationButton }.
`acknowledged`	`boolean`	—	Whether a choice has been made (controlled). Passing `false` after `true` offers the choices again.
`acknowledgementIcon`	`Glyph`	—	Glyph before the acknowledgement. Defaults to a check.
`className`	`string`	—	@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
`label`	`LocalizedMessage`	—	Accessible name of the group of choices, such as "Next step". It is not applied to the acknowledgement.
`onAcknowledge`	`((label: LocalizedMessage) => void)`	—	Runs once when the first choice is activated, before that choice's `onConfirm`, with the choice's `acknowledgeLabel`. It does not run for a group that starts acknowledged. @param label - The activated choice's `acknowledgeLabel`, when it has one

Storybook

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

DefaultOpens in a new tab

Confirmation / Usage

Confirmation / Accessibility

On this page