Progress Bar

Determinate or indeterminate progress of a task, with label and value.

Import

import { ProgressBar } from '@marbleui/ui'

Props

<ProgressBar>

Prop	Type	Default
label	`ReactNode`	`—`
showValue	`boolean`	`true`
size	`'sm' \| 'md' \| 'lg'`	`'md'`
tone	`'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`

Also accepts React Aria props (86).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria ProgressBar. Follow the primitive's docs for the full keyboard map.

Usage notes

Progress of a task with a known (or unknown) duration, such as an upload. For a quantity within a range, like storage used, use Meter; for a small inline loader use Spinner.

<ProgressBar label="Uploading 3 files" value={40} />
<ProgressBar label="Preparing export" isIndeterminate />

Extends React Aria ProgressBar: value, minValue (default 0), maxValue (default 100), valueLabel and isIndeterminate.
Provide label or aria-label. showValue (default true) shows the value text; it is hidden when indeterminate.
size is sm, md (default) or lg; tone is accent (default), success, warning or danger.
For a circular indicator use ProgressCircle.

Example source · show

import { useEffect, useState } from 'react'
import { ProgressBar } from './progress-bar'

function Uploading() {
  const [value, setValue] = useState(10)
  useEffect(() => {
    const id = setInterval(() => setValue((v) => (v >= 100 ? 10 : v + 7)), 600)
    return () => clearInterval(id)
  }, [])
  return <ProgressBar className="w-72" label="Uploading 3 files" value={Math.min(value, 100)} />
}

export const styles = {
  Default: Uploading,
  Tones: () => (
    <div className="flex w-72 flex-col gap-4">
      <ProgressBar label="Storage" value={42} tone="success" size="sm" />
      <ProgressBar label="Seats" value={78} tone="warning" size="sm" />
      <ProgressBar label="API quota" value={96} tone="danger" size="sm" />
    </div>
  ),
  Indeterminate: () => <ProgressBar className="w-72" label="Preparing export…" isIndeterminate />,
}

Source: packages/ui/src/progress-bar/progress-bar.tsx

Catalog

Category: feedback
Priority: Foundation
Primitive: react-aria
React Aria: ProgressBar
Base UI: Progress