import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
const Demo = () => {
return (
<ProgressRoot maxW="240px">
<ProgressBar />
</ProgressRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
progress snippet
npx @chakra-ui/cli snippet add progressThe snippet includes a closed component composition for the Progress
component.
Usage
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"<ProgressRoot>
<ProgressLabel />
<ProgressValueText />
<ProgressBar />
</ProgressRoot>Examples
Sizes
Use the size prop to change the size of the progress bar.
import { Stack } from "@chakra-ui/react"
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
const Demo = () => {
return (
<Stack gap="4" maxW="240px">
<ProgressRoot size="xs">
<ProgressBar />
</ProgressRoot>
<ProgressRoot size="sm">
<ProgressBar />
</ProgressRoot>
<ProgressRoot size="md">
<ProgressBar />
</ProgressRoot>
<ProgressRoot size="lg">
<ProgressBar />
</ProgressRoot>
</Stack>
)
}
Variants
Use the variant prop to change the visual style of the progress bar.
import { Stack } from "@chakra-ui/react"
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
const Demo = () => {
return (
<Stack gap="4" maxW="200px">
<ProgressRoot variant="subtle">
<ProgressBar />
</ProgressRoot>
<ProgressRoot variant="outline">
<ProgressBar />
</ProgressRoot>
</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 { Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
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>
<ProgressRoot
width="120px"
defaultValue={40}
colorPalette={colorPalette}
variant="outline"
>
<ProgressBar />
</ProgressRoot>
<ProgressRoot
width="120px"
defaultValue={40}
colorPalette={colorPalette}
variant="subtle"
>
<ProgressBar />
</ProgressRoot>
</Stack>
))}
</Stack>
)
}
Inline Label
Compose the ProgressLabel and ProgressValueText components to create an
inline label for the progress bar.
import { HStack } from "@chakra-ui/react"
import {
ProgressBar,
ProgressLabel,
ProgressRoot,
ProgressValueText,
} from "@/components/ui/progress"
const Demo = () => {
return (
<ProgressRoot defaultValue={40} maxW="sm">
<HStack gap="5">
<ProgressLabel>Usage</ProgressLabel>
<ProgressBar flex="1" />
<ProgressValueText>40%</ProgressValueText>
</HStack>
</ProgressRoot>
)
}
Info tip
Use the info prop to add a tooltip to the progress bar.
import {
ProgressBar,
ProgressLabel,
ProgressRoot,
} from "@/components/ui/progress"
const Demo = () => {
return (
<ProgressRoot maxW="240px">
<ProgressLabel info="Uploading document to the server" mb="2">
Uploading
</ProgressLabel>
<ProgressBar />
</ProgressRoot>
)
}
Indeterminate
Set the value to null to show an indeterminate progress bar.
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
const Demo = () => {
return (
<ProgressRoot maxW="240px" value={null}>
<ProgressBar />
</ProgressRoot>
)
}
Stripes
Set the striped prop to true to add stripes to the progress bar.
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
const Demo = () => {
return (
<ProgressRoot maxW="240px" striped>
<ProgressBar />
</ProgressRoot>
)
}
Animated Stripes
Set the animated prop to true to animate the stripes.
import { ProgressBar, ProgressRoot } from "@/components/ui/progress"
const Demo = () => {
return (
<ProgressRoot maxW="240px" striped animated>
<ProgressBar />
</ProgressRoot>
)
}
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. | |
ids | Partial<{ root: string; track: string; label: string; circle: string }>The ids of the elements in the progress bar. Useful for composition. | |
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. |