SubComponents

Step

The Step subcomponent, takes the content, the Header and the Footer rendered on each step.

Step API

This subcomponent extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
children	ReactNode	✅
title	string	✅
isDisabled	boolean	❌
onClick	() => void	❌

children

The children has 2 main divisions, first, the content you want to add, which can be a string, or a ReactElement and then, the <Wizard.Footer> to render elements in the footer,

title

A string used to render the step title.

isDisabled

Boolean to control if the step takes a disabled state.

onClick

Function executed when a Step is clicked, mainly used when changing the selectedStep

Footer

An space to render custom elements in the MiniWizard footer, mainly buttons.

Footer API

Props	Type	Required
children	ReactNode	✅

Button

You can use the Wizard.Button when passing a children to the Footer subcomponent, without importing the Button itself.

<MiniWizard.StepNavigation>
    <MiniWizard.Button>Next</MiniWizard.Button>
    <MiniWizard.Button>Cancel</MiniWizard.Button>
</MiniWizard.StepNavigation>

Header

An space to render custom elements in the Wizard header, mainly buttons.

Header API

Props	Type	Required
children	ReactNode	✅

Button

You can use the MiniWizard.Button when passing a children to the StepNavigation subcomponent, without importing the Button itself.

<Wizard.StepNavigation>
    <Wizard.Button>Next</Wizard.Button>
    <Wizard.Button>Cancel</Wizard.Button>
</Wizard.StepNavigation>

ReviewStepSection

The ReviewStepSection subcomponent, is not required and can be omitted, it was made to simplify the steps review + confirm. You can use it to reduce the amount of work, or if you are using a review + confirm alike step.

ReviewStepSection API

This subcomponent extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
children	ReactNode	✅
heading	ReactNode	✅
onButtonClick	() => void	✅

children

The element displayed below the title and button border.

heading

Controls the heading content.

onButtonClick

A function that is called when the edit icon button is clicked.