LinearGauge – Once UI

The LinearGauge component renders a horizontal tick-based gauge ideal for progress indicators, metrics dashboards, and system health displays. It supports flexible label configurations including none, percentage, or custom values.

Usage

<LinearGauge
  width={400}
  height={60}
  value={65}
/>

Labels

Show percentage labels at key intervals (0%, 25%, 50%, 75%, 100%).

Percentage

0%25%50%75%100%

<LinearGauge
  width={400}
  height={80}
  value={75}
  labels="percentage"
/>

Provide an array of custom labels distributed evenly across the gauge.

Custom

LowMedHighMax

<LinearGauge
  width={400}
  height={80}
  value={42}
  labels={["Low", "Med", "High", "Max"]}
/>

Reverse order

Flip the order of labels and gauge by using direction="column-reverse".

Reverse

0%25%50%75%100%

<LinearGauge
  width={400}
  height={80}
  value={65}
  labels="percentage"
  direction="column-reverse"
/>

Hue

Use the hue prop to represent different states with color gradients.

States

0%25%50%75%100%

<Column gap="16">
  <LinearGauge
    width={400}
    height={60}
    value={82}
    hue="success"
    labels="percentage"
  />
  <LinearGauge
    width={400}
    height={60}
    value={56}
    hue="neutral"
    labels="percentage"
  />
  <LinearGauge
    width={400}
    height={60}
    value={28}
    hue="danger"
    labels="percentage"
  />
  <LinearGauge
    width={400}
    height={80}
    value={90}
    hue={[280, 180]}
    labels="percentage"
  />
</Column>

Ticks

Customize tick count, width, and length for different visual densities.

Density

0%25%50%75%100%

<LinearGauge
  width={400}
  height={80}
  value={68}
  line={{
    count: 80,
    width: 2,
    length: 32,
  }}
  labels="percentage"
/>

Props

The LinearGauge component accepts all layout props from Flex (except direction) plus the following gauge-specific props:

Prop	Type	Default
width Track length, in pixels.	number	400
height Track thickness, in pixels.	number	80
line The tick marks along the track: how many, how thick, how long.	{ count?: number; width?: number; length?: number; }	—
value Where the gauge reads, 0–100.	number	50
labels "percentage" prints the value, or pass your own strings to label the ticks. "none" hides them.	nonepercentagestring[]	none
hue Colour the fill by its value — a named ramp, or a [from, to] pair of hue degrees to interpolate between.	successneutraldanger[number, number]	—
color A single colour for the fill, when it should not vary with the value. Takes a token or any CSS colour.	ColorValue	contrast
…and every FlexProps prop	inherited	—

Use LinearGauge for horizontal metrics displays, progress tracking, or any scenario where a linear representation is more appropriate than a radial one.