Color Swatches

About this piece

Color Swatches

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

Usage

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

import { Toolbar6 } from "@/components/beste/piece/toolbar6";

<Toolbar6
  swatches={[
    {
      "color": "#0f172a",
      "label": "Slate"
    },
    {
      "color": "#ef4444",
      "label": "Rose"
    },
    {
      "color": "#f59e0b",
      "label": "Amber"
    },
    {
      "color": "#10b981",
      "label": "Emerald"
    },
    {
      "color": "#0ea5e9",
      "label": "Sky"
    },
    {
      "color": "#8b5cf6",
      "label": "Violet"
    }
  ]}
  active="#10b981"
/>

More Toolbar pieces

View all Toolbar

Selection Tools

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

View Mode

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

Reaction Bar

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

125%

Zoom Controls

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

Quick Actions Bar

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

Filter Pills

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