Progress - rafty/ui Docs

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

This component is made on top of Radix UIs Progress Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.

Anatomy

Import the component.

import { Progress } from "@rafty/ui";

<Progress />;

Usage

<Progress
  className="w-full"
  colorScheme="primary"
  size="lg"
  value={80}
/>

size

There are 3 size options in progress: sm, md (default) & lg.

<div className="w-full space-y-3">
  <Progress
    size="sm"
    value={70}
  />
  <Progress
    size="md"
    value={40}
  />
  <Progress
    size="lg"
    value={50}
  />
</div>

colorScheme

There are 4 colorScheme options in progress: primary (default), error, warning & success.

<div className="w-full space-y-3">
  <Progress
    colorScheme="primary"
    value={70}
  />
  <Progress
    colorScheme="error"
    value={40}
  />
  <Progress
    colorScheme="success"
    value={60}
  />
  <Progress
    colorScheme="warning"
    value={50}
  />
</div>