ProgressBar

Component

Storybook

Figma Demo

Guidelines

The value and max props are used to calculate the visual progress within the progress bar. Any math to determine the value and/or max should be handled by the parent component.

Variations

The Progress Bar has three ways of displaying information:

• tooltip: If provided, a tooltip will display additional information for the label.

slot: If something custom is necessary (like a link), it can be accomplished by using the slot and using other components in place of the label.

• text: If no slot or tooltip is provided, the progress bar will display the current label or completeLabel based on the value.

Usage

The progress bar is intended to display progress towards a goal or requirement that is easily quantified and visualized (i.e. $400 order requirement, % of orders processed without issue, etc).

Best Practices

If using something other than a label or tooltip, ensure that the copy clarifies what the progress bar represents.

Accessibility

Content

Component Specs

API

• label: string | Default: ''
  The text below the status bar when still in progress.

• completeLabel: string | Default: “
  The text below the status bar when progress is complete.

• critical: boolean | Default: false
  If true, the progress bar will be styled as critical.

• max: number | The max numeric value of the progress bar.

• testId: string | Default: ''
  Test id for the component.

• tooltip: string | undefined | Default: ''
  The text of the tooltip. If provided, there will be a tooltip.

• tooltipId: string | generated id | Default: tooltip-${Math.random().toString(36).substr(2, 9)}
  The id of the tooltip. If provided, there will be a tooltip.

• value: number | The initial numeric value of the progress bar.

Example

<script lang="ts">
	import { ProgressBar, Tooltip, TooltipTrigger, Text, Link } from '@getprovi/craft-svelte';
	$: orders = 25;
	const addOrder = () => {
		orders += 20;
	};
	const subtractOrder = () => {
		orders -= 20;
	};
</script>

<ProgressBar critical label="Keep going!" completeLabel="You did it!" value={orders} max={100} />
<ProgressBar
	label="Keep going!"
	completeLabel="You did it!"
	value={orders}
	max={100}
	tooltip="Some text in a tooltip"
	tooltipId="tooltip-id-1"
/>
<ProgressBar label="Keep going!" completeLabel="You did it!" value={orders} max={100} let:text>
	<TooltipTrigger id="slot-trigger" text="Slot tooltip" />
	<Tooltip triggeredBy="slot-trigger">
		<div class="grid gap-8">
			<Text size="sm">{text}</Text>
			<Link size="sm" label="A link somewhere" href="#" />
		</div>
	</Tooltip>
</ProgressBar>
<ProgressBar label="Keep going!" completeLabel="You did it!" value={orders} max={100} let:text>
	<div class="flex items-center gap-8">
		<Text size="sm">{text}</Text>
		<Link size="sm" label="A link somewhere" href="#" />
	</div>
</ProgressBar>

Types

interface Props {
	label: string;
	completeLabel: string;
	critical?: boolean;
	max: number;
	tooltip?: string;
	testId?: string;
	tooltipId?: string;
	value: number;
}