'use client'
import { Progress } from '@saas-ui/react'
export const ProgressBasic = () => {
return (
<Progress.Root maxW="240px" value={50}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Anatomy
import { Progress } from '@saas-ui/react/progress'<Progress.Root>
<Progress.Label />
<Progress.ValueText />
<Progress.Bar />
</Progress.Root>Examples
Sizes
Use the size prop to change the size of the progress bar.
'use client'
import { Stack } from '@chakra-ui/react'
import { Progress } from '@saas-ui/react'
export const ProgressWithSizes = () => {
return (
<Stack gap="4" maxW="240px">
<Progress.Root size="xs">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root size="sm">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root size="md">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root size="lg">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
</Stack>
)
}
Variants
Use the variant prop to change the visual style of the progress bar.
'use client'
import { Stack } from '@chakra-ui/react'
import { Progress } from '@saas-ui/react'
export const ProgressWithVariants = () => {
return (
<Stack gap="4" maxW="200px">
<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
'use client'
import { Stack, Text } from '@chakra-ui/react'
import { Progress } from '@saas-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const ProgressWithColors = () => {
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 ProgressLabel and ProgressValueText components to create an
inline label for the progress bar.
'use client'
import { HStack } from '@chakra-ui/react'
import { Progress } from '@saas-ui/react'
export const ProgressWithInlineLabel = () => {
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.
'use client'
import { InfoTip, Progress } from '@saas-ui/react'
export const ProgressWithLabelInfo = () => {
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.
'use client'
import { Progress } from '@saas-ui/react'
export const ProgressIndeterminate = () => {
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.
'use client'
import { Progress } from '@saas-ui/react'
export const ProgressWithStripes = () => {
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.
'use client'
import { Progress } from '@saas-ui/react'
export const ProgressWithAnimatedStripes = () => {
return (
<Progress.Root maxW="240px" striped animated>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
defaultValue | '50' | numberThe initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar. |
formatOptions | '{ style: \'percent\' }' | NumberFormatOptionsThe options to use for formatting the value. |
locale | '\'en-US\'' | stringThe locale to use for formatting the value. |
max | '100' | numberThe maximum allowed value of the progress bar. |
min | '0' | numberThe minimum allowed value of the progress bar. |
orientation | '\'horizontal\'' | 'horizontal' | 'vertical'The orientation of the element. |
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
variant | 'outline' | 'outline' | 'subtle'The variant of the component |
shape | 'rounded' | 'square' | 'rounded' | 'full'The shape of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'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. | |
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. | |
value | numberThe controlled value of the progress bar. | |
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. |