Progress

Display feedback on status of task or length of a process.

#
Documentation

#
Usage

Value

import { Progress } from "@optiaxiom/react";
 
type AppProps = {
  value:
    | "0"
    | "10"
    | "20"
    | "30"
    | "40"
    | "50"
    | "60"
    | "70"
    | "80"
    | "90"
    | "100";
};
 
export function App({ value = "50" }: AppProps) {
  return <Progress value={parseInt(value)} w="2/3" />;
}

#
Related

Skeleton

Display placeholder content while data is loading.

Spinner

Used for indicating an unspecified wait time.

#
Props

#
Progress

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
getValueLabel (value: number, max: number) => string
intent Control the appearance by selecting between the different progress types. "success" \| "danger" \| "primary" Default: primary
max number
value number

#
Changelog

#
0.1.0

Added component

Popover RadioGroup