View Switcher Bar

ListWeekRooms
142 appointmentsAll sites
About this piece

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.

Usage

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

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

<Toolbar21
  surface="card"
  bordered={true}
  inverted={false}
  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.

Reaction Bar

Row of icon buttons for like, comment, share, and save. Active items tint rose.

7 / 24

Slide Controls

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