Progress

Contract

Overview

Machine-readable contract from Component Spec.

component: progressexport: Progressversion: 1attributes: data-refineui=progress

Anatomy

Part	data-refineui
root	progress

Variants

Axis	Values
size	sm, lg

Accessibility

Slot	Element	Role
progress	div	progressbar

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Progress } from "@refineui/react";

<Progress value={60} max={100} size="lg" />

<Progress value={uploadedBytes} max={totalBytes} />

API Reference

Prop	Default	Type	Description
value	—	number	Current progress value (required).
max	100	number	Maximum value.
size	—	"sm" | "lg"	Bar thickness: Small (2px) or Large (4px).