Multi Step

It is used to give a visual feedback of progress in a multi step activity.

Anatomy

Mount all pieces together and create your Multi Step

import { MultiStep } from '@micode-ui/react';
 
<MultiStep />

You can use whichever icon library you want

Step 2 of 4

<Surface
  css={{
    width: '80%'
  }}
>
  <MultiStep size={4} currentStep={2} label='Step 2 of 4' />
</Surface>

<Surface css={{
  width: '80%'
}}>
  <MultiStep size={4} currentStep={4} />
</Surface>