import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Usage
import { Progress } from "@chakra-ui/react"<Progress.Root>
<Progress.Track>
<Progress.Range />
</Progress.Track>
<Progress.Label />
<Progress.ValueText />
</Progress.Root>Examples
Sizes
Use the size prop to change the size of the progress bar.
import { For, Progress, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4" maxW="240px">
<For each={["xs", "sm", "md", "lg"]}>
{(size) => (
<Progress.Root key={size} size={size}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)}
</For>
</Stack>
)
}
Variants
Use the variant prop to change the visual style of the progress bar.
import { Progress, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4" maxW="240px">
<Progress.Root variant="subtle">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root variant="outline">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
</Stack>
)
}
Colors
Use the colorPalette prop to change the color of the progress bar.
gray
red
green
blue
teal
pink
purple
cyan
orange
yellow
import { Progress, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
>
<Text minW="8ch">{colorPalette}</Text>
<Progress.Root
width="120px"
defaultValue={40}
colorPalette={colorPalette}
variant="outline"
>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root
width="120px"
defaultValue={40}
colorPalette={colorPalette}
variant="subtle"
>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
</Stack>
))}
</Stack>
)
}
Inline Label
Compose the Progress.Label and Progress.ValueText components to create an
inline label for the progress bar.
import { HStack, Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root defaultValue={40} maxW="sm">
<HStack gap="5">
<Progress.Label>Usage</Progress.Label>
<Progress.Track flex="1">
<Progress.Range />
</Progress.Track>
<Progress.ValueText>40%</Progress.ValueText>
</HStack>
</Progress.Root>
)
}
Info tip
Use the info prop to add a tooltip to the progress bar.
import { Progress } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
const Demo = () => {
return (
<Progress.Root maxW="240px">
<Progress.Label mb="2">
Uploading
<InfoTip>Uploading document to the server</InfoTip>
</Progress.Label>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Indeterminate
Set the value to null to show an indeterminate progress bar.
import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px" value={null}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Stripes
Set the striped prop to true to add stripes to the progress bar.
import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px" striped>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Animated Stripes
Set the animated prop to true to animate the stripes.
import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px" striped animated>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Closed Component
Here's how to create a closed component using the Progress component.
import { Progress as ChakraProgress } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
import * as React from "react"
interface ProgressProps extends ChakraProgress.RootProps {
showValueText?: boolean
valueText?: React.ReactNode
label?: React.ReactNode
info?: React.ReactNode
}
export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
function Progress(props, ref) {
const { showValueText, valueText, label, info, ...rest } = props
return (
<ChakraProgress.Root {...rest} ref={ref}>
{label && (
<ChakraProgress.Label>
{label} {info && <InfoTip>{info}</InfoTip>}
</ChakraProgress.Label>
)}
<ChakraProgress.Track>
<ChakraProgress.Range />
</ChakraProgress.Track>
{showValueText && (
<ChakraProgress.ValueText>{valueText}</ChakraProgress.ValueText>
)}
</ChakraProgress.Root>
)
},
)
Props
Root
| Prop | Default | Type |
|---|---|---|
max | '100' | numberThe maximum allowed value of the progress bar. |
min | '0' | numberThe minimum allowed value of the progress bar. |
orientation | '\'horizontal\'' | OrientationThe orientation of the element. |
value | '50' | numberThe current value of the progress bar. |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
variant | 'outline' | 'outline' | 'subtle'The variant of the component |
shape | 'rounded' | 'square' | 'rounded' | 'pill'The shape of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | numberThe initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; track: string; label: string; circle: string }>The ids of the elements in the progress bar. Useful for composition. | |
onValueChange | (details: ValueChangeDetails) => voidCallback fired when the value changes. | |
translations | IntlTranslationsThe localized messages to use. | |
striped | 'true' | 'false'The striped of the component | |
animated | 'true' | 'false'The animated of the component | |
as | React.ElementTypeThe underlying element to render. | |
unstyled | booleanWhether to remove the component's style. |