Wizard

Wizard UI Component

Installation

npm i @synerise/ds-wizard
or
yarn add @synerise/ds-wizard

Usage

import Wizard from '@synerise/ds-wizard'
<Wizard
visible={true}
title={'Wizard title'}
onClose={handleClose}
headerAction={<Button onClick={() => {}}>Save and skip wizard</Button>}
onPrevStep={handlePrevStep}
onNextStep={handleNextStep}
contentWidth={'588px'}
texts={{
prevButtonLabel: 'Back',
nextButtonLabel: 'Next step',
}}
stepper={
<Stepper>
...
</Stepper>
}
footer={
<>
<Button mode="icon-label" type="ghost" onClick={() => {}}>
<Icon component={<AcademyM />} /> AI Search Help
</Button>
</>
}
>
Content
</Wizard>

Demo

API

PropertyDescriptionTypeDefault
stepperStepper componentReact.ReactNode-
footerContent of footerReact.ReactNode-
titleTitle of wizardReact.ReactNode \ string-
headerActionAdditional button in headerReact.ReactNode-
onCloseFunction called when user clicks on close wizard button() => void-
visibleWhether wizard is visiblebooleanfalse
contentWidthWidth of content ex: 500pxstring100%
onPrevStepFunction called when user clicks on prev step button() => void-
onNextStepFunction called when user clicks on next step button() => void-
textsTranslations object for wizardWizardTexts-

WizardTexts

PropertyDescriptionTypeDefault
prevButtonLabelLabel of prev buttonReact.ReactNode \ String-
nextButtonLabelLabel of next buttonReact.ReactNode \ String-