Progress Bar

The ProgressBar component renders a customizable horizontal progress slider with optional interactivity. It leverages the Slider base component for track and thumb rendering.

import { ProgressBar } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
progress	number	required	Initial progress value (0–100).
isReadOnly	boolean	false	If true, disables user interaction.
className	string	-	Additional Tailwind CSS classes for the container.
classNameTrack	string	-	Tailwind CSS classes applied to the track.
hideThumb	boolean	false	If true, hides the slider thumb.
onProgressChange	(value: number) => void	-	Callback function triggered when progress changes.

Usage

With Interactive Progress Bar

<ProgressBar
  progress={40}
  onProgressChange={(val) => console.log("Progress:", val)}
/>

With Read-Only Progress Bar

<ProgressBar progress={75} isReadOnly />

With Hidden Thumb

<ProgressBar progress={50} hideThumb classNameTrack="bg-gray-200" />

Notes

• Progress is managed internally with React useState but is controlled via the progress prop.
• If progress prop changes externally, the internal state updates automatically.
• The component uses an accessible label (aria-label="Progress Bar") and a visually hidden <label> for screen readers.