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.

ListWeekRooms
142 appointmentsAll sites

New here? Read the installation guide.

Import & use
import { Toolbar21 } from "@/components/beste/piece/toolbar21";

<Toolbar21
  segments={[
    {
      "icon": {
        "displayName": "List"
      },
      "label": "List"
    },
    {
      "icon": {
        "displayName": "CalendarDays"
      },
      "label": "Week"
    },
    {
      "icon": {
        "displayName": "Rows3"
      },
      "label": "Rooms"
    }
  ]}
  activeIndex={1}
  count="142 appointments"
  filterLabel="All sites"
/>

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.

Size Picker

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

Filter Pills

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

7 / 24

Slide Controls

Dark presenter toolbar with prev / play-pause / next, a slide counter, and a fullscreen button.

Sort

Sort Controls

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