KPI (small)

Displays a small KPI (Key Performance Indicator)

Demo

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

Name	Required	Description
`label`		A descriptive label for the KPI value

Name Value Required Description

Name	Value	Description
`status`	`error` \| `warning` \| `success` \| `neutral` \| `other` \| `empty`	Sets the status color scheme for the icon container. Default: `other` `error` - Red color scheme for error states `warning` - Yellow/orange color scheme for warning states `success` - Green color scheme for success states `neutral` - Blue color scheme for neutral/info states `empty` - Teal color scheme for empty states `other` - Gray color scheme for general use
`iconname`	string	Name of the s-icon to display. Must be a valid `class="medium"` s-icon name from the Skylab icon library.
`value`	string \| number	The primary value or metric to display

status

Sets the status color scheme for the icon container. Default: other

iconname

string

Name of the s-icon to display. Must be a valid class="medium" s-icon name from the Skylab icon library.

value

string | number

The primary value or metric to display

Name	Value	Description
`status`	`error` \| `warning` \| `success` \| `neutral` \| `other`	Sets the status color scheme for the icon container. Default: `other`
`iconName`	string	Name of the s-icon to display. Must be a valid `class="medium"` s-icon name from the Skylab icon library.
`value`	string \| number	The primary value or metric to display

Name	Description
`<AuiKpiSmall>`	Custom Element for displaying KPI information

Name	Required	Description
`label`		A descriptive label for the KPI value

Name	Value	Description
`status`	`error` \| `warning` \| `success` \| `neutral` \| `other` \| `empty`	Sets the status color scheme for the icon container. Default: `other`
`iconName`	string	Name of the s-icon to display. Must be a valid `class="medium"` s-icon name from the Skylab icon library.
`value`	string \| number	The primary value or metric to display

Use appropriate status values that match the semantic meaning of your KPI (e.g., success for positive metrics, error for problematic metrics)
Choose icons that clearly represent the type of data being displayed
Keep value text concise and readable
Use descriptive labels that provide context for the values

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