Progress
Show completion as a horizontal progress indicator.
Preview
Import
import { Progress } from "@sigil-ui/components";Usage
<div className="flex flex-col gap-3 w-full max-w-sm">
<div className="flex items-center justify-between text-sm text-[var(--s-text-muted)]"><span>Uploading</span><span className="tabular-nums">68%</span></div>
<Progress value={68} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress value (0–100). Omit for indeterminate. |
label | boolean | — | Show percentage label. |
size | "sm" | "md" | "lg" | md | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-full | Radius full |
--s-border-muted | Border muted |
--s-surface | Surface |
--s-primary | Primary |
--s-duration-normal | Duration normal |
--s-font-mono | Font mono |
--s-text-muted | Text muted |