Progress

Task completion with a neutral ink fill; not a measurement meter.

$ npx @beaket/ui add progress

Source

import { Progress } from "@/components/ui/progress";

export default function DefaultExample() {
  return <Progress value={40} aria-label="Upload progress" />;
}

Examples

All States

Uploading — 40%

Complete

Connecting — duration unknown

Source

import { Progress } from "@/components/ui/progress";

export default function AllStatesExample() {
  return (
    <div className="w-full space-y-4">
      <p>Uploading — 40%</p>
      <Progress value={40} aria-label="Upload progress" />
      <p>Complete</p>
      <Progress value={100} aria-label="Completed upload" />
      <p>Connecting — duration unknown</p>
      <Progress aria-label="Connecting" />
    </div>
  );
}

Props

Name	Type	Default	Description
value	number \| null \| undefined	null	Task progress; null (the default) means indeterminate. This is not a meter.