@synerise/ds-wizard NPM

id: wizard

title: 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>
  }
  stepButtonProps={{
    prevButtonProps: {
      type: 'primary'
    },
    nextButtonProps: {
      type: 'primary',
      disabled: true
    }
  }}
  footer={
    <>
      <Button mode="icon-label" type="ghost" onClick={() => {}}>
        <Icon component={<AcademyM />} /> AI Search Help
      </Button>
    </>
  }
>
  Content
</Wizard>

Demo

API

Property	Description	Type	Default
stepper	Stepper component	React.ReactNode	-
footer	Content of footer	React.ReactNode	-
title	Title of wizard	React.ReactNode \ string	-
headerAction	Additional button in header	React.ReactNode	-
onClose	Function called when user clicks on close wizard button	() => void	-
visible	Whether wizard is visible	boolean	false
contentWidth	Width of content ex: `500px`	string	`100%`
onPrevStep	Function called when user clicks on prev step button	() => void	-
onNextStep	Function called when user clicks on next step button	() => void	-
stepButtonProps	Custom props for prev/next buttons	WizardStepButtons	-
texts	Translations object for wizard	WizardTexts	-

WizardTexts

Property	Description	Type	Default
prevButtonLabel	Label of prev button	React.ReactNode \ String	-
nextButtonLabel	Label of next button	React.ReactNode \ String	-

WizardStepButtons

Property	Description	Type	Default
prevButtonProps	Props of prev button	Partial<Omit<ButtonProps, 'onClick'>>	-
nextButtonLabel	Props of next button	Partial<Omit<ButtonProps, 'onClick'>>	-

@synerise/ds-button @synerise/ds-icon @synerise/ds-layout @synerise/ds-modal @synerise/ds-page-header @synerise/ds-utils classnames

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @zalastax/nolb-_syn @synerise/design-system

4 months ago

3 months ago

3 months ago

3 months ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

24 days ago

1 month ago

14 days ago

15 days ago

21 days ago

23 days ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

7 months ago

7 months ago

6 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

12 months ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

9 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago