nori-ui — React Native + Web components

Linear progress bar — determinate when you know the percentage, indeterminate when you don't.

2.7 kBgzipped

At a glance

Maps to role="progressbar" with aria-valuemin / aria-valuemax / aria-valuenow. Always pass label, aria-label, or aria-labelledby so the bar is named.
The track is always pill-shaped (border-radius = height/2).

`value` and `max`

value runs from 0 to max (default 100). The fill width is (value / max) * 100%. Omit value to switch to indeterminate (see below).

<Progress value={42} />              // 42 / 100
<Progress value={3} max={5} />       // step 3 of 5 — 60%

Omit value to render a 30%-wide shuttle that loops across the track every ~1.5s. Use this when the operation has no measurable progress — an initial fetch, a streaming response, an upload before headers arrive.

`tone`

Color of the fill / shuttle. Pick by what kind of work is happening — success after a confirmation, warning during risky operations, danger while recovering from a failure.

Value	Use for
`primary` (default)	Generic progress, brand-color fill
`info`	Neutral status
`success`	"Almost done" / completion phases
`warning`	Slow / pending operations
`danger`	Failure recovery, retry phases

<Progress value={80} tone="success" />

`size`

Track height. Width always fills the parent.

Value	Track height
`sm`	4 px
`md` (default)	8 px
`lg`	12 px

<Progress value={42} size="lg" />

`label` and `hidePercentage`

label renders text above the bar. For determinate progress the percentage is auto-rendered on the right; pass hidePercentage to suppress it (useful when the label itself already conveys the number, e.g. "Step 3 of 5").

<Progress value={42} label="Uploading photos" />
<Progress value={3} max={5} label="Step 3 of 5" hidePercentage />

`aria-label` / `aria-labelledby`

When you don't render a visible label, name the bar via aria-label or aria-labelledby so screen readers announce it. Without one of those three, an unnamed progressbar is a silent progressbar.

<Progress value={42} aria-label="Upload progress" />

Props

Prop	Type	Default	Description
`aria-label`	`string`	—	Accessibility label when no visible `label` is provided.
`aria-labelledby`	`string`	—	Reference to a labeling element by id.
`className`	`string`	—	—
`hidePercentage`	`boolean`	`false`	Hide the auto-rendered percentage when a `label` is provided. Useful when the label itself already conveys the number (e.g. "Step 3 of 5"). @defaultValue false
`label`	`string`	—	Optional label rendered above the bar. When set, also enables a percentage readout on the right side for determinate progress.
`max`	`number`	`100`	Upper bound for `value`. @defaultValue 100
`size`	`enum`	`md`	Bar height — `sm` 4px, `md` 8px (default), `lg` 12px. The track is always pill-shaped (border-radius = height/2). @defaultValue 'md'
`testID`	`string`	—	—
`tone`	`enum`	`primary`	Color of the fill / shuttle. `primary` follows the theme's interactive color (matches buttons + sliders); the rest map to semantic status colors. @defaultValue 'primary'
`value`	`number`	—	Current progress value (`0..max`). Omit to render the indeterminate marquee variant (use this when you don't know how long the work will take, e.g. an initial load before headers come back).

Progress