Skip to content

index.mdx

Latest commit

 

History

History
93 lines (55 loc) · 2.19 KB

index.mdx

File metadata and controls

93 lines (55 loc) · 2.19 KB
title Progress
description Displays the completion progress of a task.
source packages/raystack/components/progress
tag new

import { playground, directUsageDemo, variantDemo, customizationDemo, animatedDemo, withLabelsDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { Progress } from '@raystack/apsara'

{/* Direct usage — renders track automatically */}
<Progress value={40} />

{/* Composable usage */}
<Progress value={40}>
  <Progress.Label>Uploading...</Progress.Label>
  <Progress.Value />
  <Progress.Track />
</Progress>

API Reference

Root

The main container for the progress. Renders a default track when no children are provided. Set value to null for an indeterminate state.

Label

Displays a label for the progress.

Value

Displays the formatted current value as a percentage.

Track

Contains the indicator that visualizes the current value.

Examples

Variant

The progress supports linear and circular variants.

Direct Usage

The simplest way to use the progress. When no children are provided, it renders the track automatically.

Customization

Customize the track for both variants. For linear, use height on the track. For circular, use width/height on the track to control the overall size and --rs-progress-track-size to control the stroke thickness.

Animated

Use controlled value to animate the progress indicator.

With Labels

Compose with Progress.Label and Progress.Value for additional context.

Accessibility

  • Uses the progressbar ARIA role
  • Sets aria-valuenow, aria-valuemin, and aria-valuemax attributes
  • Supports indeterminate state when value is null
  • Supports aria-label and aria-valuetext for screen readers