Layout
v1.0.0Added in 1.0.0
The bar above a list or table: search, filter chips, applied filters, sort, a list / grid switch, the count, actions and a bulk mode.
Type in the search (results update after a short pause, at once on Enter; Escape or × clears it). Tap the filter chips to switch quick filters on and off; when there are more than fit they scroll sideways with snapping and fade at the edges. Applied filters sit on a second row as chips with an ×; Clear filters removes them all. Sort opens a menu of options (arrow keys and Enter, Escape closes); the list / grid switch is a radio group (arrow keys move it). Page actions keep the primary visible and fold the rest into ⋯ as the row narrows. Select rows and the bar turns into a selection bar: the count, the bulk actions (folding into ⋯ when they do not fit) and × to clear, which Escape also does while focus is in the toolbar or the list next to it. On a phone the toolbar takes two rows (search with the primary action and ⋯, then the chips with sort and view as icon buttons), menus open as bottom sheets, every target is 44px, and the selection bar floats as an inverted pill above the tab bar and the home indicator. Sticky toolbars pin under the top bar on glass and show a hairline once stuck.
npx wingo-ui@latest add toolbarPro item: the CLI needs a Pro account. See plans
The companies and people you work with in Northwind CRM.
view: list · sort: newest · search: "" (300ms) · locale: en-US · last action: none
Check a few rows: the toolbar turns into the selection bar (Escape clears it). Narrow the window for the two-row phone layout.