Meter
Show a value within a known range.
1use herogpui::components::meter::Meter;Usage
Labels and values use 14px text with a 20px line height, independent of the surrounding text style.
1use herogpui::prelude::Meter;
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .w(px(256.))
7 .child(
8 Meter::new("meter-usage", value)
9 .label("Disk usage")
10 .show_value(true),
11 )Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Meter
Meter is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Meter uses.
Styling
| Style | Description |
|---|---|
ProgressBar root layout | Full-width label/output row above the track; 14px text uses a 20px line height. |
ProgressBar::size(Size) | Track thickness follows the three documented sizes. |
ProgressBar::color(Color) | Fill color follows the selected semantic role. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
new( | id, | 0 | Current value within the configured range. |
min_value( | f32 | 0 | Minimum value used to normalize the fill. |
max_value( | f32 | 100 | Maximum value used to normalize the fill. |
size( | Size | Size:: | Selects the meter track thickness. |
color( | Color | Color:: | Semantic color of the fill bar. |
format_options( | NumberFormat | {style: 'percent'} | Formats the value label; covers common numeric styles without caller-selected locale data. |
value_label( | text / AnyElement | — | Replaces the generated value text; accepts text or a value render closure. |
label( | text) + value_content( | — | Composes a label and output renderer while track and fill remain built in. |
value_content( | number | — | Normalized percentage handed to the output renderer. |
Parts
| Part | Description |
|---|---|
Meter | Root meter state and layout owner. |
Meter | Formatted output beside the label, customizable through the value closure. |
Meter | Clipped default-color track delegated to ProgressBar. |
Meter | Semantic fill proportional to the normalized value. |
States
| Builder | State | Description |
|---|---|---|
ProgressBar::value + min_value + max_value | Determinate | Fill width and output follow the normalized value. |