Sort Controls

Sort label followed by field chips and an ascending or descending arrow on the right.

Sort

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Toolbar12 } from "@/components/beste/piece/toolbar12";

<Toolbar12
  field="Date"
  fields={[
    "Name",
    "Date",
    "Size"
  ]}
  direction="desc"
/>

More Toolbar pieces

View all Toolbar

View Mode

toolbar11

Segmented view switcher with grid, rows, and list options shown as icon plus label chips.

125%

Segmented zoom control with minus, a monospace percentage readout, and plus.

Size Picker

toolbar14

Row of square size chips. The active size inverts to foreground.

Nine-cell anchor picker. The active anchor dot fills primary.

Three button groups for table editing: add row/column, merge/split, and a rose delete button.

Canvas toolbar with select, move, hand, zoom, and crop. Active tool fills muted.