Progress

Exports

Import these components from @mbsw/ui.

Progress

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Progress

Progress props
PropTypeRequirement
labelstringConditional
aria-labelstringConditional
aria-labelledbystringConditional
value

A finite, determinate percentage in the inclusive 0..100 range.

numberRequired
showValue

Show the same formatted value exposed to assistive technology.

booleanOptional
getValueLabel((value: number, max: number) => string)Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ComponentPropsWithoutRef } from 'react';

import { Progress as ProgressPrimitive } from 'radix-ui';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type AccessibleName = {
    label: string;
    'aria-label'?: string;
    'aria-labelledby'?: string;
} | {
    label?: string;
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    label?: string;
    'aria-label'?: string;
    'aria-labelledby': string;
};

export type ProgressProps = Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'asChild' | 'aria-hidden' | 'aria-label' | 'aria-labelledby' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' | 'getValueLabel' | 'max' | 'role' | 'tabIndex' | 'value'> & DataAttributes & AccessibleName & {
    /** A finite, determinate percentage in the inclusive 0..100 range. */
    value: number;
    /** Show the same formatted value exposed to assistive technology. */
    showValue?: boolean;
    getValueLabel?: (value: number, max: number) => string;
};

export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;