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" />;
}

#
Appearance

Use the intent prop to select between the different progress types.


import { Flex, Progress } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex w="1/2">
      <Progress value={25} />
      <Progress intent="success" value={50} />
      <Progress intent="danger" value={75} />
    </Flex>
  );
}

#
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