@antadesign/anta
    Preparing search index...

    Interface ProgressPropsUnreviewed

    Common props for JSX component wrappers.

    interface ProgressProps {
        value?: number | false;
        max?: number;
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        size?: "small"
        | "medium"
        | "large";
        round?: boolean | number | string;
        label?: string;
        hint?: string;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `data-${string}`]: unknown

      Any data-* attribute is forwarded to the rendered element.

    • [key: `aria-${string}`]: unknown

      Any aria-* attribute is forwarded to the rendered element.

    Index
    value?: number | false

    Current progress value. Omit this prop, or pass false, to show indeterminate progress. Negative values are clamped to 0.

    max?: number

    Upper bound of the range.

    100
    
    tone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Color variant, or any literal CSS color for a one-off custom tone (the surface / indicator / text are derived from it in oklch). Named tones track light/dark automatically.

    'neutral'
    
    size?: "small" | "medium" | "large"

    Size variant. Scales the track and the default label row together.

    medium
    
    round?: boolean | number | string

    Fully-round track (border-radius: 999px); the fill is clipped to it. Pass a number (px) or a CSS length string for a custom radius.

    label?: string

    Text label displayed after the percentage, or on its own for indeterminate progress. When you provide custom children (which replace the default label row), label is no longer rendered — but it still supplies the progressbar's accessible name.

    hint?: string

    Right-aligned hint text (e.g. "3 of 7"). Like label, it's not rendered when custom children are provided but still feeds the accessible name.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    children?: ReactNode

    Child elements. When provided, replaces the component's default label/content.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).