Progress

import {Progress} from "@qui/react-vscode"

Examples

Showcase

Theme:

Dark Modern

Label

import type {ReactElement} from "react"

import {Progress} from "@qui/react-vscode"

export default function Showcase(): ReactElement {
  return (
    <Progress.Root className="w-[240px]">
      <Progress.Label>Label</Progress.Label>
      <Progress.Track>
        <Progress.Bar />
      </Progress.Track>
    </Progress.Root>
  )
}

Layout

Compose the label and value in different DOM positions to create an inline progress bar.

Theme:

Dark Modern

Label

import type {ReactElement} from "react"

import {Progress} from "@qui/react-vscode"

export default function Layout(): ReactElement {
  return (
    <Progress.Root className="w-[240px]" defaultValue={50}>
      {({value}) => (
        <div className="flex gap-4">
          <Progress.Label>Label</Progress.Label>
          <Progress.Track>
            <Progress.Bar />
          </Progress.Track>
          <Progress.Value>{value}</Progress.Value>
        </div>
      )}
    </Progress.Root>
  )
}

API

ProgressRootProps

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	\| ReactNode \| (( props: any, ) => ReactNode)
defaultValue The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.	number
max The maximum allowed value of the progress bar.	number
min The minimum allowed value of the progress bar.	number
onValueChange Callback fired when the value changes.	( value: number \| object, ) => void
value The current value of the progress bar.	number

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

children

Type

| ReactNode
| ((
    props: any,
  ) => ReactNode)

Description

React children prop.

defaultValue

Type

number

Description

The initial value of the progress when it is first rendered. Use when you do not need to control the state of the progress.

max

Type

number

Description

The maximum allowed value of the progress bar.

min

Type

number

Description

The minimum allowed value of the progress bar.

onValueChange

Type

(
  value: number | object,
) => void

Description

Callback fired when the value changes.

value

Type

number

Description

The current value of the progress bar.

Overlay Panel

Progress Circle