Inputs & Textarea
Pull to Refresh
React Grid Layout
Metric highlights information in the form of text value based on the data it represents.
Metric can be displayed vertically or horizontally.
Metric supports showing a delta value in text. Delta text can be placed in the header, content or footer of the metric. The text can have a color assigned for positive and negative values. To improve accessibility, do not rely only on color to indicate positive or negative trends and instead add a plus or minus sign in front of the value.
An arrow is used to indicate the direction in which the metric is trending. The directional arrow is always placed immediately after the numeric value in the content section. By default, the color is Gray 060. Color can be assigned to each direction, but is not predefined. This allows for the flexibility of showing a negative value in a color that has a typically positive association, like green.
A metric badge can be used to simplify the display of a metric and combines value, direction and background color into one visual unit for a more compact display.
Metric badges are Gray 060 by default, but can be set to use any of the the bold colors shown in the Badge component or to use custom colors from the color system. Badge color is set independently from the delta text. While both should have a similar color, this allows a darker value to be set for text when needed to optimize legibility.
Labels can be placed within the header, content area or footer of Metric.
If a Metric is set to be clickable, then four states are available — enabled, hover, focused, and active.
Related metrics can be grouped together. Metric Groups are visually linked together with a thin grey line to the left of the values and have an optional group title.
Metric can be displayed in four sizes — large, medium, small and extra small.