feedback — wyrd.component.progress-bar

ProgressBar

Linear progress indicator; value is determinate from 0..100 and absent value means indeterminate.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

01

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target Applies to every example on component pages.
determinate state: determinate
Usage
import { WyrdProgressBar } from "@wyrd-company/react";

<WyrdProgressBar value={42} label="Upload progress" />
indeterminate state: indeterminate
Usage
import { WyrdProgressBar } from "@wyrd-company/react";

<WyrdProgressBar label="Preparing release" />
complete state: determinate
Usage
import { WyrdProgressBar } from "@wyrd-company/react";

<WyrdProgressBar value={100} label="Import progress" />
02

Properties

NameTypeDefaultSummary
value number undefined Determinate progress value in the normative 0..100 range; implementations clamp out-of-range values.
label string undefined Optional accessible name for the progressbar.
03

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

BindingToken
track color.outline
fill color.primary
height spacing.xs
radius rounded.full
04

States

StateSourceSummary
determinate property Value is present and clamped into the 0..100 range.
indeterminate property Value is absent.
05

Accessibility

From the contract's accessibility obligations. Role progressbar; Label property provides the accessible name when a host requires one; unnamed progressbars are allowed for purely contextual progress.

  • Exposes aria-valuemin 0 and aria-valuemax 100.
  • Exposes aria-valuenow only when value is present.
  • Determinate values are clamped to 0..100.
  • Verified under: rtl, reduced-motion, cvd-deuteranopia, density-compact.
06

SDUI

Status: serializable. ProgressBar serializes an optional 0..100 determinate value and optional label; omitted value renders indeterminate progress.

SerializableMembers
Propertiesvalue, label
Slots
Events
The Wyrding Way — a contract-first design system. © Wyrd Company