Remaining Gauge - Components - Design System

#Overview

The <RemainingGauge /> provides a visual representation of the available product quantity, indicating how many items remain for purchase.

Name	Type	Default	Description
label *	`ReactNode`	-	Label text above the gauge
value *	`number`	`0`	The value visually represented with the gauge. Range from 0 to 1 (inclusive)
shortage	`boolean`	`false`	Highlighting state, for low amount remaining, or sold out
variant	`"secondary"` \| `"standard"`	`"standard"`	Visual variant of the gauge

Show codeHide code

<RemainingGauge
  value={1}
  label={
    <>
      <strong>100</strong>&nbsp;out of 100 available
    </>
  }
/>;

Show codeHide code

<RemainingGauge
  value={0.5}
  label={
    <>
      <strong>50</strong>&nbsp;out of 100 available
    </>
  }
/>;

Show codeHide code

<RemainingGauge
  value={0.02}
  label={
    <>
      <strong>2</strong>&nbsp;out of 100 available
    </>
  }
  shortage
/>;

Show codeHide code

<RemainingGauge
  value={0}
  label={
    <>
      <strong>Gone</strong>&nbsp;100 sold
    </>
  }
/>;

Generated from Figma Showcase