Skip to main content

ProgressTracker

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 steps = [
		{
			id: 'progress-tracker-demo-step-1',
			title: 'Step 1',
			complete: true,
			navigable: true,
			onClick: () => console.log('Step 1 clicked'),
		},
		{
			id: 'progress-tracker-demo-step-2',
			title: 'Step 2',
			complete: true,
			navigable: false,
			onClick: () => console.log('Step 2 clicked'),
		},
		{
			id: 'progress-tracker-demo-step-3',
			title: 'Step 3',
			complete: false,
			navigable: true,
			onClick: () => console.log('Step 3 clicked'),
		},
		{
			id: 'progress-tracker-demo-step-4',
			title: 'Step 4',
			complete: false,
			navigable: false,
			onClick: () => console.log('Step 4 clicked'),
		},
	];

	const [activeStepId, setActiveStepId] = React.useState('progress-tracker-demo-step-1');

	function handleStepClicked(e, step) {
		setActiveStepId(step.id);
	}

	return (
		<div data-testid="pw-progresstracker">
			<ProgressTracker
				id="progress-tracker-demo"
				steps={steps}
				activeStepId={activeStepId}
				onStepClicked={handleStepClicked}
			/>
		</div>
	);
}

With React Router​

For the step object, set the tag to be the react-router-link component and set the to to the destination.

import { ProgressTracker } from '@emoney/kyber-components';
import { MemoryRouter, Link } from 'react-router-dom';

const steps = [
	{
		id: 'step-1',
		title: 'Step 1',
		complete: true,
		navigable: true,
		to: '/components/progresstracker/step1',
		tag: Link,
	},
	{
		id: 'step-2',
		title: 'Step 2',
		complete: true,
		navigable: false,
		to: '/components/progresstracker/step2',
		tag: Link,
	},
	{
		id: 'step-3',
		title: 'Step 3',
		complete: false,
		navigable: true,
		to: '/components/progresstracker/step3',
		tag: Link,
	},
	{
		id: 'step-4',
		title: 'Step 4',
		complete: false,
		navigable: false,
		to: '/components/progresstracker/step4',
		tag: Link,
	},
];

function Example() {
	const [activeStepId, setActiveStepId] = React.useState('step-1');

	function handleStepClicked(e, step) {
		setActiveStepId(step.id);
	}

	return (
		<MemoryRouter initialEntries={['/']}>
			<ProgressTracker
				id="progress-tracker-router-demo"
				steps={steps}
				activeStepId={activeStepId}
				onStepClicked={handleStepClicked}
			/>
		</MemoryRouter>
	);
}

Props​