Components
Progress Bar
Split brand/neutral track for allocation, cash, and weight bars.
Brand fill with a neutral remainder — used for allocation and holdings weight bars.
Usage
import { ProgressBar } from "@sophic/portal-ui";
<ProgressBar percent={52} />;percent is clamped to 0–100. Any non-zero share keeps a visible fill
from the left (floored to the bar height) so tiny weights like 0.01
still read.
Props
Prop
Type
Default
Changelog
- 2 October 2026 — Non-zero fills keep a minimum width so tiny percents stay visible. Full notes
- 26 September 2026 — Alternative palette: fill is brand-400, track is brand-400 at 18% on the card. Default palette is unchanged.
- 24 July 2026 — Promoted from Blocks into Components. Full notes