Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
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
One of label, aria-label, or aria-labelledby is required. If
undefined, labelProps cannot be used.
error
ReactElement | string | boolean
default:"false"
errorAriaLive
"off" | "assertive" | "polite"
default:"assertive"
Overrides how assistive technologies will announce an error message.
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.
The current value, used to determine bar fill percentage. Cannot be used with
indeterminate.
