Free cookie consent management tool by TermsFeed Gauges [SAIL Design System: Components]

Gauges


See the developer documentation for technical details about the gauge component.

When to use a gauge

Use gauges to display values that represent measurable progress towards completion.

alttext

alttext

Don’t use gauges to show values that are unbounded and don’t have an obvious 100% threshold

Gauge display text

The gauge’s primary text is displayed prominently inside the gauge's ring. Use primary text to show the underlying value that the gauge ring represents.

Use the “Percentage” format if the percentage value is most meaningful to viewers.

ds-images/ux_pages/gauge_percentage.png

Use the “Fraction” format if the count of completed items out of a total count is most meaningful.

ds-images/ux_pages/gauge_fraction.png

Secondary text is shown below the primary text. Use secondary text to label the value being shown. Or, add a label above or below the gauge if more space is needed.

ds-images/ux_pages/gauge_secondary_text.png

Alternatively, use the “Icon” format to add an eye-catching marker and use the secondary text to show the underlying value.

ds-images/ux_pages/gauge_icons.png