ProgressBar
A progress bar shows determinate progress of an operation over time
Installation
npm install --save @godaddy/antaresProps
label?string | undefined—Visible label text rendered above the track.
helperText?ReactNode—Helper or notice text rendered below the track.
size?"xs" | "sm" | "md" | undefined'md'Visual size of the track.
status?"default" | "success" | "warning" | "critical" | undefined'default'Color intent of the fill.
className?string | undefined—Additional class names to apply to the progress bar.
value?number | undefined0The current value (controlled).
minValue?number | undefined0The smallest value allowed for the input.
maxValue?number | undefined100The largest value allowed for the input.
formatOptions?Intl.NumberFormatOptions | undefined{ style: 'percent' }The display format of the value label.
valueLabel?ReactNode—The content to display as the value's label (e.g. 1 of 4).
id?string | undefined—The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
style?StyleOrFunction<ProgressBarRenderProps> | undefined—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", ProgressBarRenderProps> | undefined—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 | null | undefined—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.
Examples
Basic Usage
import { ProgressBar } from '@godaddy/antares';export function DefaultExample() { return <ProgressBar label="Loading…" value={60} helperText="Please wait while we process your request" />;}Sizes
Three track heights are available: xs (6px), sm (12px), and md (24px).
import { ProgressBar, Flex } from '@godaddy/antares';export function SizesExample() { return ( <Flex direction="column" gap="md"> <ProgressBar label="Extra Small" size="xs" value={40} /> <ProgressBar label="Small" size="sm" value={60} /> <ProgressBar label="Medium" size="md" value={80} /> </Flex> );}Statuses
Use the status prop to communicate intent: default, success, warning, or critical. Pair with helperText to provide additional context.
import { ProgressBar, Flex } from '@godaddy/antares';export function StatusesExample() { return ( <Flex direction="column" gap="md"> <ProgressBar label="Default" status="default" value={50} helperText="In progress" /> <ProgressBar label="Success" status="success" value={100} helperText="Complete" /> <ProgressBar label="Warning" status="warning" value={70} helperText="Storage almost full" /> <ProgressBar label="Critical" status="critical" value={30} helperText="Action required" /> </Flex> );}Accessibility
ARIA Support
role="progressbar"on the containeraria-valuenowreflects the current valuearia-valueminandaria-valuemaxdefine the range (default0–100)aria-valuetextprovides a formatted string (e.g."60%")aria-labelledbyassociates the visible label when thelabelprop is provided