Socra UI
Progress
Feedback / Progress

Progress

Progress in the Socra UI system.

Library Status

Partial

Progress primitives are used, but no shared recipe page exists yet.

Live Showcase

StateTheme pathRule
Default

theme.palette.text.primary

Clear, enabled, and ready.

Hover

theme.palette.action.hover

Pointer feedback only.

Selected

theme.palette.action.selected

Persistent chosen state.

Loading

theme.palette.action.disabledBackground

Show honest work underway.

Disabled

theme.palette.action.disabled

Unavailable until the cause is resolved.

Theme References

Primary action
color
theme.palette.primary.mainLive value: #00CDF0

Primary action role.

Surface
surface
theme.palette.background.surfaceLive value: rgb(32, 35, 39)

Working surface role.

Text primary
text
theme.palette.text.primaryLive value: #e0e7e7

Primary text role.

Spacing
spacing
theme.spacing(n)Live value: Resolved by recipe

Spacing role.

Shape
shape
theme.shape.borderRadiusLive value: 12

Shape role.

Usage Contract

Use Progress through the shared Socra UI stack so every product stays standardized.

A partial theme or primitive contract exists, but the full shared component page still needs product-ready coverage.

Every visible value comes from @socra/theme or a themed MUI primitive.

The page becomes complete only when the live state matrix and copy-paste recipe are real.

Do

Use the shared primitive first.

The system improves once and every product inherits the fix.

Name the user job before the component.

A component earns a place only when it helps the user decide, act, recover, or understand.

Promote missing behavior into the library.

Local UI creates drift; library contracts create standardization.

Do not

Do not build a product-local replacement.

A local primitive splits behavior and future migrations.

Do not copy theme values.

Values live in @socra/theme and are consumed by name.

Do not add decoration as a substitute for structure.

If the hierarchy is weak, fix the hierarchy.

Copy-Paste Code

Progress recipe
<Stack spacing={2}>
  <LazyLiveExample kind="Progress" />
</Stack>