Filter Pills

About this piece

Filter Pills

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

Usage

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

import { Toolbar16 } from "@/components/beste/piece/toolbar16";

<Toolbar16
  filters={[
    {
      "label": "All",
      "count": 42
    },
    {
      "label": "Active",
      "count": 18
    },
    {
      "label": "Completed",
      "count": 22
    },
    {
      "label": "Archived",
      "count": 2
    }
  ]}
  active="Active"
/>

More Toolbar pieces

View all Toolbar

Size Picker

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

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.

125%

Zoom Controls

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

Color Swatches

Row of color circles with a check on the active swatch and a trailing eyedropper for custom values.

Sort

Sort Controls

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