'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
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
'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. |