KPI Group
Several KPIs in one card, separated by hairlines.
Bookings today
128+12%
Patients arrived
96+8%
Results uploaded
64
No-shows
7+2
Usage
import { KPIGroup } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Three to five related numbers at the top of a dashboard.
When not to use
- Unrelated numbers. Use separate KPI cards.
- More than five numbers in one group.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | KPI elements | required | |
label | string | - | Accessible name of the group. |
columns | number | auto | Fixed column count. By default columns wrap at 200px. |
Accessibility
- Rendered as a group. Give it a label that says what the numbers share.