Confirmation

The Confirmation component displays various types of data in a single card with a pre-defined layout.

For more information on how to use the features and props for this component, check out the developer documentation.

The Confirmation component is composed of a title and details, along with optional regions for whatsNext and tasks. If an onClose callback function is provided, a Done Button will render at the bottom of the containing Card.

Details

The details region accepts any React Node, although we recommend using the FieldValueList component. The content in the details region should be a quick synopsis of the event or case being confirmed.

What's next

The whatsNext region accepts a list of React Nodes that will render within an UnorderedList. This region should include simple, logical next steps for the event or case being confirmed.

Tasks

The tasks region accepts any React Node, although we recommend using the Tasks component. The content in the tasks region should break down the steps within the whatsNext UnorderedList with actual action items for the user to complete.

NameTypeDefaultDescription
details*ReactNodeRegion for a Field Value List component
title*stringThe title of the confirmation
onClose() => voidCalled when the done/close button is clicked
refRef<HTMLElement>Ref for the wrapping element.
tasksReactNodeRegion for a Tasks component
whatsNextArray of React nodes to be put into a list