ProgressBar

Copy for LLM

Represents the completion progress of a task.

Import

import { ProgressBar } from "@cfa/react-core";

Live Editor

Examples

Color

There are several color options: "primary" by default and "secondary" | "success" | "warning" | "error".

Compact

The compact prop can be used to reduce the height of the Progress Bar.

Format Options

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

The valueLabel prop is available to customize the label when changing the scale of the Progress Bar with minValue and maxValue.

Props

Visit the Documentation Site for the full list of props.

ProgressBar

Name	Type	Default	Description
color	`"primary" \| "secondary" \| "success" \| "warning" \| "error"`	`primary`	Fill color of the ProgressBar bar
compact	`boolean`	`false`	Smaller height bar
label	`string`	-	Label of the ProgressBar
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
children	`ChildrenOrFunction<ProgressBarRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`ClassNameOrFunction<ProgressBarRenderProps>`	`'react-aria-ProgressBar'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
dir	`string`	-	-
formatOptions	`NumberFormatOptions`	`{style: 'percent'}`	The display format of the value label.
hidden	`boolean`	-	-
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	`boolean`	-	-
lang	`string`	-	-
maxValue	`number`	`100`	The largest value allowed for the input.
minValue	`number`	`0`	The smallest value allowed for the input.
onAnimationEnd	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLDivElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onClick	`MouseEventHandler<HTMLDivElement>`	-	-
onClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLDivElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLDivElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onGotPointerCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onLostPointerCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onPointerCancel	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onScroll	`UIEventHandler<HTMLDivElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLDivElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onWheel	`WheelEventHandler<HTMLDivElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLDivElement>`	-	-
render	`DOMRenderFunction<"div", ProgressBarRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
style	`StyleOrFunction<ProgressBarRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
translate	`"yes" \| "no"`	-	-
value	`number`	`0`	The current value (controlled).
valueLabel	`ReactNode`	-	The content to display as the value's label (e.g. 1 of 4).