4.32.2

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.
`highusage`	number or string		Defines the highUsage percentage threshold. Defaults to `80`.
`lowcolor`	`blue-medium` \| `yellow-dark` \| `red-dark`		The color of the meter when the percentage is below the highUsage threshold. Defaults to `blue-medium`.
`highcolor`	`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`	`blue-medium` \| `yellow-dark` \| `red-dark`		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.
`highUsage`	number or string		Defines the highUsage percentage threshold. Defaults to `80`.
`lowColor`	`blue-medium` \| `yellow-dark` \| `red-dark`		The color of the meter when the percentage is below the highUsage threshold. Defaults to `blue-medium`.
`highColor`	`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`	`blue-medium` \| `yellow-dark` \| `red-dark`		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`	`blue-medium` \| `yellow-dark` \| `red-dark`		The color of the meter when the percentage is below the highUsage threshold. Defaults to `blue-medium`.
`highColor`	`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`	`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

Guidelines

Accessibility

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

Design

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