StatTabs
Equal tabs over a list that each show a view's count, the chosen one on a sliding raised panel, a select on a phone.
import { StatTabs } from "@butteryui/react";Demo
When to use it
Use it for
- Splitting a table by state with how many rows each holds: All, Unpaid, Shipped
- Three to five views where the counts matter
Not for
- Named filters people save: use SavedViews
- Sections of a record: use Tabs
Examples
Order queue
An order queue opened on what needs a look: the tabs split the list by state, each with its count.
Order 1043, Ines Moreau
$22.50
Orders by state
Orders by state over a table: each tab says how many orders it holds, and the chosen one is kept in state.
Showing every order.
Subscription states
Subscriptions by state, uncontrolled, starting on Active.
Variants and states
Counts per state
The panel slides to the tab chosen; under 640px of room it becomes a select.
Props
StatTabs
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | Names the tabs for screen readers, such as "Orders by state". | |
tabsrequired | readonly StatTab[] | The tabs, in order. | |
value | string | The chosen tab's value. Pair with onValueChange to control it. | |
defaultValue | string | The tab chosen at first when uncontrolled. Defaults to the first. | |
onValueChange | ((value: string) => void) | Called with the value of the tab chosen. |
It also takes Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">.
StatTab
One tab of a `StatTabs`.
| Field | Type | Default | Description |
|---|---|---|---|
valuerequired | string | What value and onValueChange carry. | |
labelrequired | string | Its name, such as "Unpaid". | |
countrequired | number | Its count, shown after the name, such as 12. |
Accessibility
A radio group named by its label; each tab is a radio named by its label and count, and arrow keys move the choice. Under 640px it's a select named by the same label.
| Keys | What they do |
|---|---|
| Left and Right arrows | Move to the previous or next tab and choose it, wrapping at the ends |
| Home or End | Moves to the first or last tab |
| Space | Chooses the focused tab |
| Enter, Space, Up or Down | Opens the select it becomes under 640px, where Up and Down move, Enter chooses and Escape closes |
Motion
Its selection indicator slides to the chosen option on `spring.snappy`, inside one track.
With reduced motion: The raised panel lands on the chosen tab at once instead of sliding.
Layout
It fills its parent's width in a 48px track, the tabs sharing it equally, each one its whole hit area; a long label truncates and shows in full on hover, and the count keeps its size. Under 640px of its own width it's an outline select as wide as its parent.
Related
See it in the roastery demo's subscriptions.