# @fayegram-ai/faye-ui/feedback/progress Public exports and dependency-resolved component properties, with usage and rendering guidance. ## Import ```tsx import { LinearProgress, Progress } from '@fayegram-ai/faye-ui/feedback/progress'; ``` [Usage and behavior guide](/docs/feedback/) · [API JSON](/api/packages/feedback/progress.json) This entry declares a client boundary. Follow the rendering guide for framework integration. ## Public exports | Name | Kind | Resolved declaration type | |---|---|---| | `LinearProgress` | value | `({ value, bufferValue, mode, min, max, label, showValue, ...props }: LinearProgressProps) => import("react").JSX.Element` | | `ProgressRootProps` | type | `ProgressRootProps` | | `Progress` | value | `{ readonly Root: { (input: ProgressRootProps & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Track: { (input: Omit & import("react").RefAttributes & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined; }): import("react").Re… (full type in API JSON)` | | `LinearProgressProps` | type | `LinearProgressProps` | ## LinearProgress A buffer is a visual loaded amount; the accessible value remains completed work. Dependency-resolved declaration properties. Common React/native HTML attributes are omitted from the table; use the full declaration and React/native references. Generic and union restrictions remain authoritative in TypeScript. ### Properties | Property | Required | Type | Meaning | |---|---|---|---| | `animationDirection` | No | `"ltr" \| "rtl" \| undefined` | Physical direction of indeterminate/query motion, independent of text direction. | | `aria-valuetext` | No | `string \| undefined` | A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar. | | `bufferValue` | No | `number \| undefined` | See the usage contract and declaration. | | `className` | No | `string \| ((state: ProgressRootState) => string \| undefined) \| undefined` | CSS class applied to the element, or a function that returns a class based on the component's state. | | `format` | No | `Intl.NumberFormatOptions \| undefined` | Options to format the value. | | `getAriaValueText` | No | `((formattedValue: string, value: number \| null) => string) \| undefined` | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. | | `label` | No | `ReactNode` | See the usage contract and declaration. | | `locale` | No | `Intl.LocalesArgument` | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. | | `max` | No | `number \| undefined` | The maximum value. | | `min` | No | `number \| undefined` | The minimum value. | | `mode` | No | `"indeterminate" \| "determinate" \| "buffer" \| "query" \| undefined` | See the usage contract and declaration. | | `render` | No | `ReactElement> \| ComponentRenderFn \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | | `showValue` | No | `boolean \| undefined` | See the usage contract and declaration. | | `style` | No | `CSSProperties \| ((state: ProgressRootState) => React.CSSProperties \| undefined) \| undefined` | Style applied to the element, or a function that returns a style object based on the component's state. | | `value` | No | `number \| null \| undefined` | See the usage contract and declaration. | | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ## Progress Public component; use the linked family guide for complete composition and behavior. Dependency-resolved declaration properties. Common React/native HTML attributes are omitted from the table; use the full declaration and React/native references. Generic and union restrictions remain authoritative in TypeScript. ### Progress.Root | Property | Required | Type | Meaning | |---|---|---|---| | `animationDirection` | No | `"ltr" \| "rtl" \| undefined` | Physical direction of indeterminate/query motion, independent of text direction. | | `aria-valuetext` | No | `string \| undefined` | A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar. | | `className` | No | `string \| ((state: ProgressRootState) => string \| undefined) \| undefined` | CSS class applied to the element, or a function that returns a class based on the component's state. | | `format` | No | `Intl.NumberFormatOptions \| undefined` | Options to format the value. | | `getAriaValueText` | No | `((formattedValue: string, value: number \| null) => string) \| undefined` | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. | | `locale` | No | `Intl.LocalesArgument` | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. | | `max` | No | `number \| undefined` | The maximum value. | | `min` | No | `number \| undefined` | The minimum value. | | `render` | No | `ReactElement> \| ComponentRenderFn \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | | `style` | No | `CSSProperties \| ((state: ProgressRootState) => React.CSSProperties \| undefined) \| undefined` | Style applied to the element, or a function that returns a style object based on the component's state. | | `value` | Yes | `number \| null` | The current value. The component is indeterminate when value is `null`. | | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ### Progress.Track | Property | Required | Type | Meaning | |---|---|---|---| | `className` | No | `string \| ((state: ProgressTrackState) => string \| undefined) \| undefined` | CSS class applied to the element, or a function that returns a class based on the component's state. | | `render` | No | `ReactElement> \| ComponentRenderFn \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | | `style` | No | `CSSProperties \| ((state: ProgressTrackState) => React.CSSProperties \| undefined) \| undefined` | Style applied to the element, or a function that returns a style object based on the component's state. | | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ### Progress.Indicator | Property | Required | Type | Meaning | |---|---|---|---| | `className` | No | `string \| ((state: ProgressIndicatorState) => string \| undefined) \| undefined` | CSS class applied to the element, or a function that returns a class based on the component's state. | | `render` | No | `ReactElement> \| ComponentRenderFn \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | | `style` | No | `CSSProperties \| ((state: ProgressIndicatorState) => React.CSSProperties \| undefined) \| undefined` | Style applied to the element, or a function that returns a style object based on the component's state. | | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ### Progress.Value | Property | Required | Type | Meaning | |---|---|---|---| | `children` | No | `((formattedValue: string \| null, value: number \| null) => React.ReactNode) \| null \| undefined` | See the usage contract and declaration. | | `className` | No | `string \| ((state: ProgressValueState) => string \| undefined) \| undefined` | CSS class applied to the element, or a function that returns a class based on the component's state. | | `render` | No | `ReactElement> \| ComponentRenderFn \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | | `style` | No | `CSSProperties \| ((state: ProgressValueState) => React.CSSProperties \| undefined) \| undefined` | Style applied to the element, or a function that returns a style object based on the component's state. | | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ### Progress.Label | Property | Required | Type | Meaning | |---|---|---|---| | `className` | No | `string \| ((state: ProgressLabelState) => string \| undefined) \| undefined` | CSS class applied to the element, or a function that returns a class based on the component's state. | | `render` | No | `ReactElement> \| ComponentRenderFn \| undefined` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | | `style` | No | `CSSProperties \| ((state: ProgressLabelState) => React.CSSProperties \| undefined) \| undefined` | Style applied to the element, or a function that returns a style object based on the component's state. | | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ### Progress.Buffer | Property | Required | Type | Meaning | |---|---|---|---| | `variants` | No | `{ readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"progress", "tone"> \| undefined; } \| undefined` | See the usage contract and declaration. | ## Defaults and customization Descriptor defaults: `{"size":"md","tone":"neutral"}`. Parts: `root`, `track`, `indicator`, `value`, `label`, `buffer`. Explicit instance props take precedence over configured defaults. Use semantic tokens, public part hooks and customization sheets. Keep visual configuration separate from application state. ## State, events and accessibility For interactive controls, pair a controlled value/open prop with its corresponding change callback; default props initialize uncontrolled state. Keep application validation and submission policy explicit. Name controls with visible labels, name icon-only actions on the button, and preserve focus and dismissal behavior when replacing parts. Use native form names and submit/reset types where supported. See the usage guide for component-specific behavior and live examples. ## Declaration authority Generated from `packages/faye-ui/dist/feedback/progress.d.ts` after the semantic package build. Common native/React attributes are intentionally omitted from property tables. Generic overloads, discriminated unions and complete inherited attributes remain authoritative in installed TypeScript declarations. [React DOM attributes](https://react.dev/reference/react-dom/components/common) and [Base UI component contracts](https://base-ui.com/react/overview/quick-start) describe the inherited foundations.