# Code ## Props

Props	Data Type	Required
children	(WizardStep)	✅
className	string	❌
commland	boolean	❌
show	boolean	❌
title	string	❌
type	string (Initial, Edit)	❌
confirmationLoading	boolean	❌
confirmationValidation	boolean	❌
confirmationStepTitle	string	❌
confirmationContentTitle	string	❌
confirmationContentDescription	string	❌
confirmationButton	string	❌
confirmationError	boolean	❌
confirmationErrorTitle	boolean	❌
confirmationErrorMessage	boolean	❌
confirmationDismissAction	Function	❌
nextButton	string	❌
previousButton	string	❌
cancelButton	string	❌
onCancel	Function Event	❌
onConfirm	Function Event	❌

{% hint style="info" %} commland prop is used to adjust the Alert component to the Commland UI-Shell automatically. {% endhint %} ### Where to Insert This Component in Comm.land? This component should overlay all the content inside the application. To keep a better order and avoiding problems with UI Shell, it is recommended inserting this component outside and next to the AppPage component. If it is inserted inside the AppPageContent component, the modal is not going to render correctly. {% hint style="info" %} For a general usage, outside Comm.land and the UI Shell, the Alert component is recommended to be inserted either at the beginning or at the end of the react component where it is going to be used. {% endhint %} ### onCancel and onConfirm These actions are going to be executed only at clicking the cancel and confirmation buttons respectively. A difference between the Mini Wizard and the Modal component, is that by default the Mini Wizard is locked and it cannoty be exited in other ways but clicking the cancel button. ### Children To generate the structure required for the component, the developer is able to insert the following components as children elements: #### WizardStep

Props	Data Type	Required
children	WizardStepActions (Opcional) WizardStepContent, WizardStepReview	✅
className	string	❌
stepTitle	string	❌
validation	boolean (This should be connected to a state on the developers side)	❌

#### WizardStepActions

Props	Data Type	Required
children	Any	✅
type	string (Actions)	✅
className	string	❌

#### WizardStepContent

Props	Data Type	Required
children	Any	✅
type	string (Content)	✅
className	string	❌

#### WizardStepReview

Props	Data Type	Required
children	Any	✅
type	string (Review)	✅
className	string	❌

### Example ```tsx import React, { useState } from 'react'; import { Text, Button, MiniWizard, WizardStep, Checkbox } from '@2600hz/sds-react-components'; const Example = ()=>{ const [showMiniWizard, setShowMiniWizard] = useState(false); const [validations, setValidations] = useState({ stepOne: true, stepTwo: true }); const [confirmationValidation, setConfirmationValidation] = useState(true); const cancel = () => { console.log('cancel'); setShowMiniWizard(false); }; const confirm = () => { setConfirmationValidation(false); setTimeout(() => { console.log('Api test'); setConfirmationValidation(true); setShowMiniWizard(false); }, 2000); }; return ( <> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi aliquam asperiores quis, fugiat dicta suscipit iusto voluptas ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt nostrum vitae deleniti voluptatibus minima.
{ setValidations((prevState) => ({ ...prevState, stepOne: e.checked })); }} /> Something... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi aliquam asperiores quis, fugiat dicta suscipit iusto voluptas ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt nostrum vitae deleniti voluptatibus minima. Something... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi aliquam asperiores quis, fugiat dicta suscipit iusto voluptas ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt nostrum vitae deleniti voluptatibus minima.
{ setValidations((prevState) => ({ ...prevState, stepTwo: e.checked })); }} /> Something... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi aliquam asperiores quis, fugiat dicta suscipit iusto voluptas ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt nostrum vitae deleniti voluptatibus minima. Something... ); } export default App; ``` ## Components Dependency For this component elaboration there were used the following internal components: * [Tooltip](/sds/sds-components/simple-components/tooltip.md) * [Telicon](/sds/sds-components/simple-components/telicon.md) * [Button](/sds/sds-components/simple-components/button.md) * [Text](/sds/sds-components/simple-components/text.md) ## Live Demo For detailed code usage documentation, see the Storybooks for each framework below. ### {% embed url="" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://2600hz.gitbook.io/sds/sds-components/simple-components/mini-wizard/code.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.