KpiTile
import { KpiTile } from '@enmovil/ui-design-system';
A tile that shows one KPI: a label, a value, optional sub-text and an up, down or flat trend. Tiles come in several colour tones, become clickable when given onClick, and can be laid out with KpiGrid.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
className | string | No | — | — | Extra CSS class added to the tile. |
icon | ReactNode | No | — | — | Icon shown before the label, in a tinted square. Nothing is shown when it is absent. |
tone | string | No | 'teal' | 'info', 'teal', 'green', 'red', 'amber', 'slate' | Colour of the icon square: teal, amber, red, green, slate or info. Defaults to teal. Has no visible effect without icon. |
label | ReactNode | Yes | — | — | Name of the KPI, shown at the top of the tile. |
value | ReactNode | Yes | — | — | The KPI value, shown large below the label. |
sub | ReactNode | No | — | — | Smaller text shown below the value. Nothing is shown when it is absent. |
trend | { value: ReactNode; direction: "flat" | "up" | "down"; } | No | — | — | Change indicator shown at the bottom of the tile, as an arrow and a value. Nothing is shown when it is absent. |
trend
An object with these fields:
| Field | Type | Required | Description |
|---|---|---|---|
value | React.ReactNode | Yes | Text of the trend, shown after the arrow, for example "+4%". |
direction | "up" | "down" | "flat" | Yes | up, down or flat. Sets the arrow (up, down or right) and the trend's colour. |
Other attributes
KpiTile passes 271 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onClick | (() => void) | Fires when the tile is clicked. Passing it also gives the tile its clickable styling. |
onMouseEnter | MouseEventHandler<HTMLDivElement> | Fires when the pointer enters the tile. Useful for a hover preview of the underlying data. |
onMouseLeave | MouseEventHandler<HTMLDivElement> | Fires when the pointer leaves the tile. |
Children
KpiTile does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Single example.
Loading playground…
Storybook
Open KpiTile in Storybook to try every story with the full set of controls.