Lists
Breakdown card
A breakdown with the panel around it: dimension tabs, two value columns, a faded overflow row and a hover toolbar.
VisitorsTotal
Props
| Property | Type | Default | Description |
|---|---|---|---|
rows | BreakdownCardRow[] | — | { key, label?, value, secondary?, icon? }. secondary feeds the second value column; icon is any node — a flag, a favicon, a provider glyph. |
title | string | — | Header text. Ignored when tabs is given — the tabs are the header. |
tabs | BreakdownCardTab[] | — | { id, label } per dimension, rendered as a tablist. The host owns the state. |
activeTab | string | — | Selected tab id. Defaults to the first tab. |
onTabChange | (id: string) => void | — | Fired on tab selection. |
valueLabel | string | "Visitors" | Right-aligned heading for the value column. |
secondaryLabel | string | — | Heading for the second value column. Omit to hide the column entirely. |
display | "value" | "share" | "both" | "value" | value prints the number, share its percentage, both prints each — a percentage alone is the classic dashboard ambiguity. |
variant | "bars" | "split" | "plain" | "heat" | "bars" | bars puts the magnitude behind the label. split moves it to its own track underneath. plain drops it. heat tints the whole row instead of measuring it, which survives a narrow column that a bar cannot. |
fadeLast | boolean | false | Fades the last row — the honest signal that the list is truncated, rather than a hard cut that reads as the end of the data. |
onExpand | () => void | — | Adds the expand affordance under the rows. |
expandLabel | string | "Show all" | Text on the expand control. |
actions | ReactNode | — | Toolbar revealed on hover or keyboard focus, so row actions do not compete with the data while you read it. |
emptyLabel | string | "No breakdown data." | Shown when rows is empty. |
className | string | — | Outer wrapper. |