Progress v0.1.0 Feedback

Determinate or indeterminate progress bar with full progressbar semantics.

import { Progress } from "latticeui-react";

Examples

Determinate

Uploading photos64%

Show code

<Progress label="Uploading photos" value={64} />

Indeterminate

Omit value when total work is unknown.

Processing

Show code

<Progress label="Processing" />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="progress"][data-part="root"]`
`label`	`div`	`[data-scope="progress"][data-part="label"]`
`valueText`	`span`	`[data-scope="progress"][data-part="valueText"]`
`track`	`div[role=progressbar]`	`[data-scope="progress"][data-part="track"]`
`fill`	`div`	`[data-scope="progress"][data-part="fill"]`

Props

Prop	Type	Default	Description
`label`	`string`	—
`value`	`number`	—	Omit for indeterminate.
`max`	`number`	`100`
`showValueText`	`boolean`	`true`

Accessibility

Roles: progressbar

aria-valuenow omitted while indeterminate.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="progress"][data-part="track"] {
  /* your overrides */
}

State attributes: data-indeterminate