4.46.4

KPI (large)

Displays a large KPI (Key Performance Indicator)

Demo

API

Tag

Name Description
<aui-kpi-large> Custom Element for displaying KPI information

Slots

Name Required Description
label

A descriptive label for the KPI

Attributes

Name Value Required Description
value string | number

The primary value or metric to display
tagiconname arrow-up | arrow-down | ''

Name of the icon to display in the tag, typically used to indicate trend direction.

  • arrow-up - Indicates an upward trend
  • arrow-down - Indicates a downward trend
  • '' - No icon displayed
tagvalue string | number

The value to display in the tag, typically a percentage or numeric change
tagcolor red-lighter | green-lighter | gray-lightest

Sets the color scheme for the tag.

  • red-lighter - Red color scheme, typically for negative trends
  • green-lighter - Green color scheme, typically for positive trends
  • gray-lightest - Gray color scheme, typically for neutral or no change

Properties

Name Value Required Description
value string | number

The primary value or metric to display
tagIconName arrow-up | arrow-down | ''
tagValue string | number
tagColor red-lighter | green-lighter | gray-lightest

Sets the color scheme for the tag.

Demo

API

Tag

Name Description
<AuiKpiLarge> Custom Element for displaying KPI information

Slots

Name Required Description
label

A descriptive label for the KPI

Props

Name Value Required Description
value string | number

The primary value or metric to display
tagIconName arrow-up | arrow-down | ''

Name of the icon to display in the tag, typically used to indicate trend direction.
tagValue string | number

The value to display in the tag, typically a percentage or numeric change
tagColor red-lighter | green-lighter | gray-lightest

Sets the color scheme for the tag.

Skylab React links

General information about using our React package

Guidelines

Empty state

Use the aui-kpi-small component with status="empty" to display an empty state.

Design

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