MetricProgressBar

Purpose

MetricProgressBar displays progress or percentage metrics with:

• Configurable value position
• Custom formatting
• Size variants
• Customizable colors

When to use

Use MetricProgressBar for:

• Goal progress indicators
• Capacity/usage meters
• Completion percentages
• Budget utilization

Basic usage

import { MetricProgressBar } from '@/shared/ui/components/MetricProgressBar'

<MetricProgressBar value={75} />

With label

<MetricProgressBar
  value={75}
  label="Storage used"
  valuePosition="inline-right"
/>

Custom formatting

<MetricProgressBar
  value={750}
  max={1000}
  formatValue={(percent) => `${750} / 1000 MB`}
  valuePosition="top-right"
/>

Props

Prop	Type	Default	Description
value	number	Required	Current value
max	number	100	Maximum value
label	ReactNode	-	Label text
showValue	boolean	true	Show percentage
valuePosition	ValuePosition	'top-right'	Value placement
formatValue	(percent: number) => ReactNode	-	Custom formatter
size	'sm' | 'md'	'sm'	Bar height
trackClassName	string	-	Track (background) class
indicatorClassName	string	-	Filled bar class
className	string	-	Container class
labelClassName	string	-	Label text class
valueClassName	string	-	Value text class

Value positions

Position	Description
top-right	Value above bar, right-aligned
top-center	Value above bar, centered
inline-right	Label left, value right, above bar
none	No value displayed

Custom colors

// Success color
<MetricProgressBar
  value={100}
  indicatorClassName="bg-green-500"
/>

// Warning color
<MetricProgressBar
  value={85}
  indicatorClassName="bg-amber-500"
/>

// Danger color
<MetricProgressBar
  value={95}
  indicatorClassName="bg-red-500"
/>

Notes

• Value is automatically clamped between 0-100%
• Use max prop when value isn't already a percentage
• Default indicator color is bg-primary
• Track uses bg-muted by default