Feedback

Progress

Visualizes task completion progress or indeterminate background activity.

idle

Usage

import {
	Progress,
	ProgressIndicator,
	ProgressLabel,
	ProgressTrack,
	ProgressValue,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Progress>
	<ProgressLabel />
	<ProgressValue />
	<ProgressTrack>
		<ProgressIndicator />
	</ProgressTrack>
</Progress>

Guidance	Practice
Do	Name the operation and use actual completion data. Use an indeterminate state when progress cannot be measured.

Guidance	Boundary
Scope	Use Meter for bounded measurements. Do not invent percentages from elapsed time.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value`	`number \| null`	`—`	Current progress value between min and max, or null when indeterminate.
`min`	`number`	`0`	Minimum value of the progress bar.
`max`	`number`	`100`	Maximum value of the progress bar.
`format`	`Intl.NumberFormatOptions`	`—`	Number format options passed to Intl.NumberFormat.
`children`	`ReactNode`	`—`	Optional children for composed anatomy; auto-renders track and indicator when omitted.
`render`	`ReactElement \| RenderFunction`	`—`	Composes progress behavior onto another element.

Feedback

Visualizes task completion progress or indeterminate background activity.

idle

import {
	Progress,
	ProgressIndicator,
	ProgressLabel,
	ProgressTrack,
	ProgressValue,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Progress>
	<ProgressLabel />
	<ProgressValue />
	<ProgressTrack>
		<ProgressIndicator />
	</ProgressTrack>
</Progress>

Guidance	Practice
Do	Name the operation and use actual completion data. Use an indeterminate state when progress cannot be measured.

Guidance	Boundary
Scope	Use Meter for bounded measurements. Do not invent percentages from elapsed time.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value`	`number \| null`	`—`	Current progress value between min and max, or null when indeterminate.
`min`	`number`	`0`	Minimum value of the progress bar.
`max`	`number`	`100`	Maximum value of the progress bar.
`format`	`Intl.NumberFormatOptions`	`—`	Number format options passed to Intl.NumberFormat.
`children`	`ReactNode`	`—`	Optional children for composed anatomy; auto-renders track and indicator when omitted.
`render`	`ReactElement \| RenderFunction`	`—`	Composes progress behavior onto another element.