Media Controls

About this piece

Skip, play/pause, and skip controls inside a pill. Toggle the playing flag to flip the center button.

Usage

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

import { Toolbar2 } from "@/components/beste/piece/toolbar2";

<Toolbar2
  surface="card"
  bordered={true}
  inverted={false}
  playing={true}
/>

7 / 24

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

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

Left / center / right / justify alignment buttons. Active state fills muted.

Sort

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

A floating pill toolbar of round icon actions with one accent-highlighted primary action.

125%

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