Progress | Zalify UI

React

Usage

import { Progress } from '@zalify-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.

React

Variants

Use the variant prop to change the visual style of the progress bar.

React

Colors

Use the colorPalette prop to change the color of the progress bar.

React

Inline Label

Compose the Progress.Label and Progress.ValueText components to create an inline label for the progress bar.

Usage

42%

React

Indeterminate

Set the value to null to show an indeterminate progress bar.

React

Stripes

Set the striped prop to true to add stripes to the progress bar.

React

Animated Stripes

Set the animated prop to true to animate the stripes.

React

Closed Component

Here's how to setup the progress for a closed component composition.

import { forwardRef, type ReactNode } from 'react'
import { Progress as StyledProgress } from '@zalify-ui/react'

interface ProgressProps extends StyledProgress.RootProps {
  showValueText?: boolean
  valueText?: ReactNode
  label?: ReactNode
}

export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(props, ref) {
  const { showValueText, valueText, label, ...rest } = props
  return (
    <StyledProgress.Root {...rest} ref={ref}>
      {label && <StyledProgress.Label>{label}</StyledProgress.Label>}
      <StyledProgress.Track>
        <StyledProgress.Range />
      </StyledProgress.Track>
      {showValueText && <StyledProgress.ValueText>{valueText}</StyledProgress.ValueText>}
    </StyledProgress.Root>
  )
})

Props

Root

Prop	Default	Type
`variant`	`'solid'`	`'solid' \| 'subtle'`
`shape`	`'rounded'`	`'square' \| 'rounded' \| 'full'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`
`defaultValue`	`50`	`number` The 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\ }`	`NumberFormatOptions` The options to use for formatting the value.
`locale`	`\en-US\`	`string` The locale to use for formatting the value.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the element.
`striped`		`boolean`
`animated`		`boolean`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`id`		`string` The 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) => void` Callback fired when the value changes.
`translations`		`IntlTranslations` The localized messages to use.
`value`		`number` The controlled value of the progress bar.

View

Prop	Default	Type
`state`*		`ProgressState`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.