Sort Controls

Sort
About this piece

Sort Controls

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

Usage

The import and the props worth knowing about, in one place.

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

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

More Toolbar pieces

View all Toolbar

View Mode

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

125%

Zoom Controls

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

Alignment Grid

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

Size Picker

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

Table Controls

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

Selection Tools

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