Documentation
Components
Progress

Progress

Display progress relative to a limit or related to a task.

Usage

First of all, you need to import the Progress component from the kitchn package.

import { Progress } from "kitchn"

Default

Code Editor
<Progress value={30} />

Custom max

Code Editor
<Progress value={30} max={40} />

Dynamic colors

Code Editor
() => {
const [value, setValue] = React.useState(0);
const { theme } = useTheme();
return (
<Container>
  <Progress
    value={value}
    colors={{
      0: theme.colors.accent.danger,
      25: theme.colors.accent.warning,
      50: theme.colors.accent.success,
      75: theme.colors.accent.info,
      100: theme.colors.accent.primary,
    }}
  />
  <Container gap={5} row>
    <Button type={"dark"} onClick={() => setValue(value - 10)}>
      -
    </Button>
    <Button type={"dark"} onClick={() => setValue(value + 10)}>
      +
    </Button>
    <Button type={"dark"} onClick={() => setValue(0)}>
      reset
    </Button>
  </Container>
</Container>
)}

States

Your package is in our hands
Code Editor
() => {
const [value2, setValue2] = React.useState(0);
const { theme } = useTheme();
return (
<Container gap={"small"}>
  <Progress
    value={value2}
    colors={{
      0: theme.colors.accent.danger,
      25: theme.colors.accent.warning,
      50: theme.colors.accent.success,
      75: theme.colors.accent.info,
      100: theme.colors.accent.primary,
    }}
    states={{
      0: "Your package is in our hands",
      25: "It is in our network",
      50: "Your package has arrived at its delivery site",
      75: "We are preparing your package for delivery",
      100: "Your package has been delivered",
    }}
  />
  <Container gap={"tiny"} row>
    <Button type={"dark"} onClick={() => setValue2(value2 - 25)}>
      -
    </Button>
    <Button type={"dark"} onClick={() => setValue2(value2 + 25)}>
      +
    </Button>
    <Button type={"dark"} onClick={() => setValue2(0)}>
      reset
    </Button>
  </Container>
</Container>
)}

Props

NameTypeDefaultRequiredDescriptionAccepted values
valuenumber0✅The current value of the progress bar.-
maxnumber100-The max value of the progress bar.-
colorsRecord<number, string>--The custom colors for the progress bar.-
statesRecord<number, string | React.ReactNode >--The custom states for the progress bar.-
titlebooleantrue-The title of the progress bar.-
checkpointTitlebooleantrue-The title of the progress bar's checkpoint.-
Last updated on
NoteScroller