Stepper

Steps before current show as finished, the current one as active. A step can override its state via status ('finish' | 'process' | 'wait' | 'error').

Cart

3 items

Shipping

Address & carrier

Payment

Done


import { Stepper } from '@gg-software/ui';
 
<Stepper
    current={step}
    steps={[
        { title: 'Cart', description: '3 items' },
        { title: 'Shipping', description: 'Address & carrier' },
        { title: 'Payment', status: paymentFailed ? 'error' : undefined },
        { title: 'Done' },
    ]}
    orientation="vertical"
/>;

Props

Prop	Type	Default
`steps`*	`Step[]`	—
`current`	`number`	`0`
`orientation`	`"horizontal" \| "vertical"`	`horizontal`
`className`	`string`	—

* required · generated from packages/ui/src/navigation/Stepper/Stepper.tsx

Types


type Step = {
    title: ReactNode;
    description?: ReactNode;
    status?: 'finish' | 'process' | 'wait' | 'error';
};