ProgressTrackerNew

Expected Kyber 14 Changes

• ProgressTrackerNew will become ProgressTracker in v14.

Progress trackers are designed to help users through a multi-step process and it's vital to keep users informed about what section they are currently on, what section they have completed, and what tasks remain. Display the steps from left to right.

Result

Loading...

Live Editor

function Example() { const [activeStep, setActiveStep] = useState('step-2'); const [completedSteps, setCompletedSteps] = useState(['step-1']); const steps = [ { id: 'step-1', icon: 'icon-file-search-02', label: 'Step 1', }, { id: 'step-2', icon: 'icon-file-search-02', label: 'Step 2', }, { id: 'step-3', icon: 'icon-receipt-check', label: 'Step 3', }, { id: 'step-4', icon: 'icon-flag-06', label: 'Step 4', }, { id: 'step-5', icon: 'icon-file-search-02', label: 'Step 5', }, ]; return ( <ProgressTrackerNew> {steps.map(({ id, icon, label }) => ( <ProgressTrackerNew.Step id={id} label={label} renderIcon={() => <span className={icon} />} active={activeStep === id} onClick={setActiveStep} complete={completedSteps.includes(id)} /> ))} </ProgressTrackerNew> ); }

function Example() {
    const [activeStep, setActiveStep] = useState('step-2');
    const [completedSteps, setCompletedSteps] = useState(['step-1']);
    const steps = [
        {
            id: 'step-1',
            icon: 'icon-file-search-02',
            label: 'Step 1',
        },
        {
            id: 'step-2',
            icon: 'icon-file-search-02',
            label: 'Step 2',
        },
        {
            id: 'step-3',
            icon: 'icon-receipt-check',
            label: 'Step 3',
        },
        {
            id: 'step-4',
            icon: 'icon-flag-06',
            label: 'Step 4',
        },
        {
            id: 'step-5',
            icon: 'icon-file-search-02',
            label: 'Step 5',
        },
    ];

    return (
        <ProgressTrackerNew>
            {steps.map(({ id, icon, label }) => (
                <ProgressTrackerNew.Step
                    id={id}
                    label={label}
                    renderIcon={() => <span className={icon} />}
                    active={activeStep === id}
                    onClick={setActiveStep}
                    complete={completedSteps.includes(id)}
                />
            ))}
        </ProgressTrackerNew>
    );
}

Connector and Icons

You can set the connector prop to be 'line' or 'arrow' for the connector between the steps.

Icons are optional.

Result

Loading...

Live Editor

function Example() { const [activeStep, setActiveStep] = useState('step-2'); const steps = [ { id: 'step-1', label: 'Step 1', }, { id: 'step-2', label: 'Step 2', }, { id: 'step-3', label: 'Step 3', }, { id: 'step-4', label: 'Step 4', }, { id: 'step-5', label: 'Step 5', }, ]; return ( <ProgressTrackerNew connector="arrow"> {steps.map(({ id, icon, label }) => ( <ProgressTrackerNew.Step id={id} label={label} active={activeStep === id} onClick={setActiveStep} /> ))} </ProgressTrackerNew> ); }

function Example() {
    const [activeStep, setActiveStep] = useState('step-2');
    const steps = [
        {
            id: 'step-1',
            label: 'Step 1',
        },
        {
            id: 'step-2',
            label: 'Step 2',
        },
        {
            id: 'step-3',
            label: 'Step 3',
        },
        {
            id: 'step-4',
            label: 'Step 4',
        },
        {
            id: 'step-5',
            label: 'Step 5',
        },
    ];

    return (
        <ProgressTrackerNew connector="arrow">
            {steps.map(({ id, icon, label }) => (
                <ProgressTrackerNew.Step
                    id={id}
                    label={label}
                    active={activeStep === id}
                    onClick={setActiveStep}
                />
            ))}
        </ProgressTrackerNew>
    );
}

Customizing ProgressTracker when on a dark background

When using the ProgressTrackerNew component on a dark background you must use the light variant and adjust the colors of the HorizontalScrollingList's buttons and gradients via CSS variables. The following example shows how to do this:

Result

Loading...

Live Editor

function Example() { const [activeStep, setActiveStep] = useState('step-2'); const steps = [ { id: 'step-1', icon: 'icon-file-search-02', label: 'Step 1', }, { id: 'step-2', icon: 'icon-file-search-02', label: 'Step 2', }, { id: 'step-3', icon: 'icon-receipt-check', label: 'Step 3', }, { id: 'step-4', icon: 'icon-flag-06', label: 'Step 4', }, { id: 'step-5', icon: 'icon-file-search-02', label: 'Step 5', }, { id: 'step-6', icon: 'icon-file-search-02', label: 'Step 6', }, { id: 'step-7', icon: 'icon-file-search-02', label: 'Step 7', }, ]; return ( <> <div className="progress-darkly bg-blue-900" style={{ '--bs-horizontal-scrollleft-background': 'var(--bs-blue-900)', '--bs-horizontal-scrollright-background': 'var(--bs-blue-900)', '--bs-horizontal-scrollleft-gradient': 'rgba(217, 217, 217, 0.2)', '--bs-horizontal-scrollright-gradient': 'rgba(217, 217, 217, 0.2)', }} > <ProgressTrackerNew variant="light"> {steps.map(({ id, icon, label }) => ( <ProgressTrackerNew.Step id={id} label={label} renderIcon={() => <span className={icon} />} active={activeStep === id} /> ))} </ProgressTrackerNew> </div> </> ); }

function Example() {
    const [activeStep, setActiveStep] = useState('step-2');
    const steps = [
        {
            id: 'step-1',
            icon: 'icon-file-search-02',
            label: 'Step 1',
        },
        {
            id: 'step-2',
            icon: 'icon-file-search-02',
            label: 'Step 2',
        },
        {
            id: 'step-3',
            icon: 'icon-receipt-check',
            label: 'Step 3',
        },
        {
            id: 'step-4',
            icon: 'icon-flag-06',
            label: 'Step 4',
        },
        {
            id: 'step-5',
            icon: 'icon-file-search-02',
            label: 'Step 5',
        },
        {
            id: 'step-6',
            icon: 'icon-file-search-02',
            label: 'Step 6',
        },
        {
            id: 'step-7',
            icon: 'icon-file-search-02',
            label: 'Step 7',
        },
    ];

    return (
        <>
            <div
                className="progress-darkly bg-blue-900"
                style={{
                    '--bs-horizontal-scrollleft-background': 'var(--bs-blue-900)',
                    '--bs-horizontal-scrollright-background': 'var(--bs-blue-900)',
                    '--bs-horizontal-scrollleft-gradient': 'rgba(217, 217, 217, 0.2)',
                    '--bs-horizontal-scrollright-gradient': 'rgba(217, 217, 217, 0.2)',
                }}
            >
                <ProgressTrackerNew variant="light">
                    {steps.map(({ id, icon, label }) => (
                        <ProgressTrackerNew.Step
                            id={id}
                            label={label}
                            renderIcon={() => <span className={icon} />}
                            active={activeStep === id}
                        />
                    ))}
                </ProgressTrackerNew>
            </div>
        </>
    );
}

Props

ProgressTrackerNew

ProgressTrackerNew.Step