Figure tabs
NewHeadline figures that double as the tabs of the chart beneath them. Each figure is a label, a value and how it moved; the one that is selected wears a teal line, which glides to the next when you pick it. Reach for them above a chart, in place of a row of stat cards.
Default
Figures sit straight on the surface, divided by hairlines, with a hairline under the row. Each has a label, a value in Sora, a change (usually a Delta) and an optional quiet hint. Pick one: the teal line glides to it on a spring.
Compact: the Z-read strip
variant="compact" sets each figure on one baseline (label, value, change) like the totals on a till's Z-read, 36px apart with no dividers and a smaller 21px figure. It is the strip on the home page of Orbit Commerce's store dashboard. On phones it becomes two columns, with the label and the change on lines of their own.
In both themes
Default above, compact below. The line is Orbit teal with a soft glow in light, and mint in dark.
Loading
With loading, a shimmering pill stands in for each value and the change is held back, while labels and hints stay put so the row does not jump when the figures land.
With a chart: the performance strip
The pairing the component exists for, as it runs on the home. A Segmented control picks the range, the compact strip shows four figures as Rolling numbers (they roll when the range changes), and the Area chart below follows the selected figure. Change the range, then pick another figure.
Motion
| Moment | What happens |
|---|---|
| Selecting a figure | One teal line glides from the old figure to the new on the snappy spring, so the eye follows a single mark. |
| Hover | The label darkens; in the default variant a faint wash rises from the hairline. |
| Loading | The placeholder pills shimmer slowly until the figures arrive. |
| Reduced motion | The line moves at once and the shimmer stops. Everything else is unchanged. |
Guidelines
- Two to four figures. More than four and the row wraps, and the eye loses which one drives the chart.
- Labels of one or two words: "Total sales", "Orders", "Conversion rate".
- Pass values already formatted, or a Rolling number for a figure that changes while it is on screen. Show movement with a Delta in
change. - Say what the change compares with once, in a hint or near the range control, and keep it the same for every figure.
Accessibility
- The row is a tab list and needs an
aria-label(the prop is required). Each figure is a tab with its label, value and change as its name, andaria-selectedon the chosen one. - The row is one tab stop. Left and right arrows move the selection and focus together, wrapping at the ends, and Home and End jump to the first and last. The chart follows as you move.
- The focus ring is teal, 2px, drawn just inside the figure.
- Name the chart with
role="tabpanel"and the selected figure's label, since the tabs do not point at a panel themselves.
Props
Also accepts every native div attribute except onChange.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsRequired | ReadonlyArray<FigureTabItem<K>> | None | The figures, in order. |
valueRequired | K | None | The key of the selected figure. |
onValueChangeRequired | (key: K) => void | None | Called with the key of the figure picked. |
aria-labelRequired | string | None | Names the row for assistive tech, e.g. "Headline figures". |
variant | 'default' | 'compact' | 'default' | Compact sets each figure on one baseline, like a Z-read. |
loading | boolean | false | Shows a shimmer where the values will be. |
FigureTabItem
| Prop | Type | Default | Description |
|---|---|---|---|
keyRequired | K extends string | None | Identifies the figure. |
labelRequired | ReactNode | None | What the figure is, e.g. "Orders". |
valueRequired | ReactNode | None | The figure, already formatted, or a RollingNumber. |
change | ReactNode | None | How it moved, e.g. <Delta />. |
hint | ReactNode | None | Quiet context after the change, e.g. "vs previous 30 days". |