Quick Actions Bar

About this piece

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

Usage

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

import { Toolbar20 } from "@/components/beste/piece/toolbar20";

<Toolbar20
  items={[
    {
      "icon": {
        "displayName": "Plus"
      },
      "label": "New member",
      "primary": true
    },
    {
      "icon": {
        "displayName": "CalendarPlus"
      },
      "label": "Book appointment"
    },
    {
      "icon": {
        "displayName": "MessageSquarePlus"
      },
      "label": "Message"
    },
    {
      "icon": {
        "displayName": "Search"
      },
      "label": "Search"
    }
  ]}
/>

More Toolbar pieces

View all Toolbar

Reaction Bar

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

00:00

Recording Bar

Floating capture bar with a pulsing record dot, a timer counting the take, and a level meter whose bars keep dancing.

History

Two-button undo / redo toolbar. Buttons fade when their action is unavailable.

Selection Tools

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

Format Toolbar

Compact formatting bar with bold, italic, underline, strike, align, and link buttons.

View Mode

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