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

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>
	);
}

Connector and Icons

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

Icons are optional.

Result

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>
	);
}

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

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>
		</>
	);
}

Connector and Icons​

Customizing ProgressTracker when on a dark background​

Props​