Progress Bar

Implementation
ProgressBar Props

Common Examples

import { ProgressBar } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <ProgressBar
      label="50% Completed"
      value={50}
      description="Description for Progress Bar"
    />
  );
}

Progress bar fill percentage

Progress bars show a completed state when the value is equal to the max value, which is 100 by default. Otherwise, the value is divided by the max to determine what percentage the bar should be visually filled to.

Showing indeterminate progress bars

If the indeterminate prop is set to true, the progress bar will show an animation to signal to the user that the progress has not been determined.

Progress bar error state

Use the error prop to show an error state. If a string is provided to the error prop, a message will also be displayed.

<ProgressBar
  label="50% Completed"
  value={50}
  max={100}
  indeterminate={false}
  error={false}
  errorAriaLive="assertive"
  description="Description text"
  labelProps={{ moreInfo: "Additional label text", moreInfoOpen: true }}
/>

`ProgressBar` Props

label

ReactNode

One of label, aria-label, or aria-labelledby is required. If undefined, labelProps cannot be used.

description

ReactElement | string

error

ReactElement | string | boolean

default:"false"

errorAriaLive

"off" | "assertive" | "polite"

default:"assertive"

Overrides how assistive technologies will announce an error message.

indeterminate

boolean

Displays indeterminate animation when true. Cannot be used with value.

labelProps

{ moreInfo?: ReactNode; moreInfoOpen?: boolean }

Properties passed to the Label component. Can only be used with label.

max

number | string

default:"100"

The maximum value, used to determine bar fill percentage.

value

number | string

The current value, used to determine bar fill percentage. Cannot be used with indeterminate.

​Common Examples

​Progress bar fill percentage

​Showing indeterminate progress bars

​Progress bar error state

​ProgressBar Props

Common Examples

Progress bar fill percentage

Showing indeterminate progress bars

Progress bar error state

`ProgressBar` Props