Properties
| Property | Type | Description |
|---|---|---|
status | infosuccesswarningdanger | |
showMaxValue | boolean | Whether the max value should be displayed. |
size | smlDefault: "m" | The size variant of the progress bar. |
segments | { value: number; title: string; color?: CategoricalWithCustomColor; valueText?: string; }[] | Divides the fill of the progress bar into segments |
showLegend | booleanDefault: :
true | Whether the legend component is shown when segments are used. |
id | string | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
translate | yesno | |
className | ClassNameOrFunction<ProgressBarRenderProps>Default: '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. |
style | StyleOrFunction<TooltipRenderProps> | 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. |
render | DOMRenderFunction<"div", TooltipRenderProps> | 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. |
dir | string | |
lang | string | |
hidden | boolean | |
inert | boolean | |
minValue | numberDefault: 0 | The smallest value allowed for the input. |
maxValue | numberDefault: 100 | The largest value allowed for the input. |
value | numberDefault: 0 | The current value (controlled). |
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. |
formatOptions | NumberFormatOptionsDefault: { style: 'percent' } | The display format of the value label. |
isIndeterminate | boolean | Whether presentation is indeterminate when progress isn't known. |
valueLabel | ReactNode | The content to display as the value's label (e.g. 1 of 4). |
children | ReactNode | |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | |
ref | Ref<HTMLSpanElement> | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs |
key | Key |
Events
| Property | Type | Description |
|---|---|---|
onClick | MouseEventHandler<HTMLDivElement> | |
onClickCapture | MouseEventHandler<HTMLDivElement> | |
onAuxClick | MouseEventHandler<HTMLDivElement> | |
onAuxClickCapture | MouseEventHandler<HTMLDivElement> | |
onContextMenu | MouseEventHandler<HTMLDivElement> | |
onContextMenuCapture | MouseEventHandler<HTMLDivElement> | |
onDoubleClick | MouseEventHandler<HTMLDivElement> | |
onDoubleClickCapture | MouseEventHandler<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> | |
onTouchCancel | TouchEventHandler<HTMLDivElement> | |
onTouchCancelCapture | TouchEventHandler<HTMLDivElement> | |
onTouchEnd | TouchEventHandler<HTMLDivElement> | |
onTouchEndCapture | TouchEventHandler<HTMLDivElement> | |
onTouchMove | TouchEventHandler<HTMLDivElement> | |
onTouchMoveCapture | TouchEventHandler<HTMLDivElement> | |
onTouchStart | TouchEventHandler<HTMLDivElement> | |
onTouchStartCapture | TouchEventHandler<HTMLDivElement> | |
onPointerDown | PointerEventHandler<HTMLDivElement> | |
onPointerDownCapture | PointerEventHandler<HTMLDivElement> | |
onPointerMove | PointerEventHandler<HTMLDivElement> | |
onPointerMoveCapture | PointerEventHandler<HTMLDivElement> | |
onPointerUp | PointerEventHandler<HTMLDivElement> | |
onPointerUpCapture | PointerEventHandler<HTMLDivElement> | |
onPointerCancel | PointerEventHandler<HTMLDivElement> | |
onPointerCancelCapture | PointerEventHandler<HTMLDivElement> | |
onPointerEnter | PointerEventHandler<HTMLDivElement> | |
onPointerLeave | PointerEventHandler<HTMLDivElement> | |
onPointerOver | PointerEventHandler<HTMLDivElement> | |
onPointerOverCapture | PointerEventHandler<HTMLDivElement> | |
onPointerOut | PointerEventHandler<HTMLDivElement> | |
onPointerOutCapture | PointerEventHandler<HTMLDivElement> | |
onGotPointerCapture | PointerEventHandler<HTMLDivElement> | |
onGotPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | |
onLostPointerCapture | PointerEventHandler<HTMLDivElement> | |
onLostPointerCaptureCapture | PointerEventHandler<HTMLDivElement> | |
onScroll | UIEventHandler<HTMLDivElement> | |
onScrollCapture | UIEventHandler<HTMLDivElement> | |
onWheel | WheelEventHandler<HTMLDivElement> | |
onWheelCapture | WheelEventHandler<HTMLDivElement> | |
onAnimationStart | AnimationEventHandler<HTMLDivElement> | |
onAnimationStartCapture | AnimationEventHandler<HTMLDivElement> | |
onAnimationEnd | AnimationEventHandler<HTMLDivElement> | |
onAnimationEndCapture | AnimationEventHandler<HTMLDivElement> | |
onAnimationIteration | AnimationEventHandler<HTMLDivElement> | |
onAnimationIterationCapture | AnimationEventHandler<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> |
Accessibility
| Property | Type | Description |
|---|---|---|
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. |
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. |