SavedViews
A track of saved views of a list, the chosen one on a sliding raised pill, with every view and its actions in a menu.
import { SavedViews } from "@butteryui/react";Demo
When to use it
Use it for
- Named filters over a table people come back to, such as Unpaid or Wholesale
- Letting people save the current filters as a view of their own
Not for
- Counts per state: use StatTabs
- Sections of a record: use Tabs
- A setting with two to five options: use SegmentedControl
Examples
Many views
More views than room: the last ones fold away and stay in the … menu.
View: Everyone
Order views
Saved views over an orders table, kept in state with the chosen one, and actions on it in the … menu.
Showing All orders
Orders by view
Saved views over an orders list: choosing one shows the orders it keeps.
Order 1043, Ines Moreau
$22.50
Order 1044, Hill Street Bakery
$96.00
Variants and states
Saved views
The pill slides to the view chosen; the … menu lists every view, the actions on the chosen one and Save as a new view.
Props
SavedViews
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | Names the views for screen readers, such as "Order views". | |
viewsrequired | readonly SavedView[] | The views, in order. | |
value | string | The chosen view's id. Pair with onValueChange to control it. | |
defaultValue | string | The view chosen at first when uncontrolled. Defaults to the first. | |
onValueChange | ((id: string) => void) | Called with the id of the view chosen. | |
actions | ReactNode | Actions on the chosen view in the "…" menu, as Menu.Items, such as rename, duplicate and delete. | |
onSaveAs | (() => void) | Called by "Save as a new view" in the menu. Leave it out to hide the item. | |
moreLabel | string | "More views" | Names the "…" button. Defaults to "More views". |
saveAsLabel | string | The words for "Save as a new view", for other languages. |
It also takes Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">.
SavedView
One saved view of a list.
| Field | Type | Default | Description |
|---|---|---|---|
idrequired | string | What value and onValueChange carry. | |
labelrequired | string | Its name. |
Accessibility
A radio group named by its label: arrow keys move between views and choose them. The More views button opens a menu with every view as a menuitemradio (the chosen one checked), then the actions and Save as a new view.
| Keys | What they do |
|---|---|
| Left and Right arrows | Move to the previous or next view and choose it, wrapping at the ends |
| Home or End | Moves to the first or last view showing |
| Space | Chooses the focused view |
| Enter, Space or Down | Opens the More views menu from its button, 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 pill lands on the chosen view at once instead of sliding.
Layout
It fills its row with a 34px track (--bt-h-control) on bg-control that hugs its views and the … button. Each view is as wide as its name, the whole pill its hit area, and a long name truncates and shows in full on hover; views that don't fit fold into the menu, the chosen one staying in the track.