@navikt/ds-react/esm/progress-bar/ProgressBar.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React, { HTMLAttributes } from "react";
interface ProgressBarPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
    /**
     * Changes height.
     * @default "medium"
     */
    size?: "large" | "medium" | "small";
    /**
     * Current progress. If set, the `simulated` prop overrides `value`.
     */
    value?: number;
    /**
     * Maximum progress.
     * @default 100
     */
    valueMax?: number;
    /**
     * Visually simulates loading.
     * ProgressBar grows with a preset animation for set number of seconds,
     * then shows an indeterminate animation on timeout.
     */
    simulated?: {
        /**
         * Duration in seconds.
         */
        seconds: number;
        /**
         * Callback function when progress is indeterminate.
         */
        onTimeout: () => void;
    };
    /**
     * String ID of the element that labels the progress bar.
     * Not needed if `aria-label` is used.
     */
    "aria-labelledby"?: string;
    /**
     * String value that labels the progress bar.
     * Not needed if `aria-labelledby` is used.
     */
    "aria-label"?: string;
}
export type ProgressBarProps = ProgressBarPropsBase & ({
    "aria-hidden": true;
} | {
    "aria-labelledby": string;
    "aria-label"?: never;
} | {
    "aria-label": string;
    "aria-labelledby"?: never;
});
/**
 * ProgressBar
 * A component for visualizing progression in a process.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
 * @see 🏷️ {@link ProgressBarProps}
 *
 * @example
 * // For loading content with an approximate duration in sec.
 * <ProgressBar simulated={{
 *     seconds: 30,
 *     onTimeout: () => console.log("Oops, this is taking more time than expected!")
 *   }}
 * />
 *
 * @example
 * // As a step indicator for forms, questionnaires, etc.
 * <ProgressBar value={2} valueMax={7} />
 */
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
export default ProgressBar;