Meter

Usage meter

Demo

API

Tag

Name	Description
`<aui-meter>`	Custom Element which displays a meter.

Slots

Name	Required	Description
`label-left`		Label on left side of meter
`label-right`		Label on right side of meter

Attributes

Name	Value	Required	Description
`percentage`	number or string		The percentage to be displayed in the meter. Omit it, or set it to a value that is not a number, to render the empty state.
`highusage`	number or string		Defines the highUsage percentage threshold. Defaults to `80`.
`lowcolor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark` \| `green-medium`		The color of the meter when the percentage is below the highUsage threshold. Defaults to `teal-gradient`.
`highcolor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark` \| `green-medium`		The color of the meter when the percentage is between the highUsage threshold and 100% (inclusive). Defaults to `yellow-dark`.
`overagecolor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark` \| `green-medium`		The color of the meter when the percentage is above 100%. Defaults to `red-dark`.
`animationtimems`	number or string		Time in milliseconds to animate the meter value.
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Required	Description
`percentage`	number or string		The percentage to be displayed in the meter. Omit it, or set it to a value that is not a number, to render the empty state.
`highUsage`	number or string		Defines the highUsage percentage threshold. Defaults to `80`.
`lowColor`	`teal-gradient` \| blue-medium \| `yellow-dark` \| `red-dark` \| `green-medium`		The color of the meter when the percentage is below the highUsage threshold. Defaults to `teal-gradient`.
`highColor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark` \| `green-medium`		The color of the meter when the percentage is between the highUsage threshold and 100% (inclusive). Defaults to `yellow-dark`.
`overageColor`	`teal-gradient` \| blue-medium \| `yellow-dark` \| `red-dark` \| `green-medium`		The color of the meter when the percentage is above 100%. Defaults to `red-dark`.
`animationTimeMs`	number or string		Time in milliseconds to animate the meter value.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Demo

API

Tag

Name	Description
`<AuiMeter>`	Custom Element which displays a meter.

Slots

Name	Required	Description
`label-left`		Label on left side of meter
`label-right`		Label on right side of meter

Props

Name	Value	Required	Description
`percentage`	number or string		The percentage to be displayed in the meter.
`highUsage`	number or string		Defines the highUsage percentage threshold. Defaults to `80`.
`lowColor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark`		The color of the meter when the percentage is below the highUsage threshold. Defaults to `teal-gradient`.
`highColor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark`		The color of the meter when the percentage is between the highUsage threshold and 100% (inclusive). Defaults to `yellow-dark`.
`overageColor`	`teal-gradient` \| `blue-medium` \| `yellow-dark` \| `red-dark`		The color of the meter when the percentage is above 100%. Defaults to `red-dark`.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"auiMeter.ariaLabel"`	The default aria-label of the meter.	Usage
`"auiMeter.emptyMessage"`	The message shown below the meter when the percentage is unknown.	Data isn't available right now

Guidelines

States

The meter has four states, driven by percentage and the highusage threshold:

Empty — percentage is omitted or is not a number. The track shows a pale teal gradient and the label slots are replaced by a single message. Use it while data is loading or unavailable.
Low — below highusage (default 80). Uses lowcolor, a teal gradient by default.
High — from highusage up to and including 100%. Uses highcolor, yellow by default, to signal the limit is close.
Overage — above 100%. Uses overagecolor, red by default.

Color alone does not convey status. Always provide the labels so the value is readable without it.

Labels

Use class="input-desc" on both label slots — the meter's labels are helper text, styled the same as the helper text below a form field. In the overage state, pair the left label with a validation message on the right using class="input-msg" and an alert-circle-filled icon.

Accessibility

An aria-label provided on the <aui-meter> element will be applied to the child <meter> element.

In the empty state the <meter> carries an aria-valuetext of the empty message, so assistive technology announces that the value is unknown rather than reading it as zero.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com