ForgeForge

Progress

ProgressBar 线性进度条，8 色 × 2 尺寸，支持 label、百分比与深色底。

ProgressBar

最基础的进度展示元素，常用于 dashboard、卡片、任务完成度等场景。

Import

import { ProgressBar } from "@forge-ui/react";

Usage

最简用法只需传 value，配合 label 与 showPercentage 组合出完整条目。

75%
Progress60%
1<ProgressBar value={45} />
2<ProgressBar value={75} showPercentage />
3<ProgressBar value={60} label="Progress" showPercentage />

Colors

8 种色：purple / blue / green / red / orange / yellow / cyan / gray。

1<ProgressBar value={60} color="purple" />
2<ProgressBar value={60} color="blue" />
3<ProgressBar value={60} color="green" />
4<ProgressBar value={60} color="red" />
5<ProgressBar value={60} color="yellow" />
6<ProgressBar value={60} color="cyan" />
7<ProgressBar value={60} color="gray" />

Sizes

sm 8px 高，md 12px 高。

Small75%
Medium75%
1<ProgressBar value={75} size="sm" label="Small" showPercentage />
2<ProgressBar value={75} size="md" label="Medium" showPercentage />

Label variants

default 灰色 medium 适合描述文本；value 黑色 semibold 适合展示金额 / 数值。

Progress45%
$40045%
1<ProgressBar value={45} label="Progress" showPercentage />
2<ProgressBar value={45} label="$400" labelVariant="value" showPercentage />

Label size

label 与百分比字号联动，xs 用于紧凑卡片，sm 为默认。

Progress45%
Progress45%
1<ProgressBar value={45} label="Progress" labelSize="xs" showPercentage />
2<ProgressBar value={45} label="Progress" labelSize="sm" showPercentage />

On dark

onDark 用于深色卡片 / dashboard，轨道变半透明，文字转白色。

Progress60%
1<div className="bg-fg-black p-6 rounded-xl">
2  <ProgressBar value={60} color="purple" label="Progress" showPercentage onDark />
3</div>

API

AttributeTypeDefaultDescription
valuenumber0进度值，0-100，自动 clamp。
color'purple' | 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'gray''purple'填充色，8 种语义色。
size'sm' | 'md''sm'进度条粗细，sm 8px / md 12px。
labelstring—左侧文字，如 'Progress' 或金额 '$400'。
labelVariant'default' | 'value''default'default 灰色 medium，value 黑色 semibold。
labelSize'xs' | 'sm''sm'label 与百分比文字大小。
showPercentagebooleanfalse是否显示右侧百分比。
onDarkbooleanfalse深色底上渲染：半透明轨道 + 白色文字。
看所有变体 →