Size Picker

About this piece

Size Picker

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

Usage

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

import { Toolbar14 } from "@/components/beste/piece/toolbar14";

<Toolbar14
  sizes={[
    "XS",
    "S",
    "M",
    "L",
    "XL"
  ]}
  active="M"
/>

More Toolbar pieces

View all Toolbar

Alignment Grid

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

View Mode

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

ListWeekRooms
142 appointmentsAll sites

View Switcher Bar

A control bar with a segmented view switcher on a soft track, a live result count, and a filter chip on the row beneath.

Filter Pills

Row of filter chips with optional count numbers. Active chip inverts to foreground.

Sort

Sort Controls

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

Selection Tools

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