KPI
Card for one key number, with its change and context.
Bookings today
128+12%
Patients arrived
96+8%
Results uploaded
128
Loading and negative change
Bookings today
No-shows
7+2
Usage
import { KPI } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Numbers watched every day.
When not to use
- A number without context or comparison.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | |
value | number | string | required | Numbers are formatted automatically. |
trend | TrendChipProps | - | |
chartData | number[] | - | Adds a sparkline. |
progress | number (0 to 100) | - | |
footer | string | - | |
icon | IconName | - | |
isLoading | boolean | false |
Accessibility
- The sparkline is decorative: the trend chip already states the direction.