Floating button group

When to use #

Use it for

Editor and canvas toolbars with a few formatting actions.
Floating controls over content.

Skip it when

The actions are mutually exclusive; use a segmented control.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/floating-button-group.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Bold, Italic, Link2, Underline } from "lucide-react"
import { useState } from "react"
import { FloatingButtonGroup } from "@/components/ui/floating-button-group"

export function FormatBar() {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  return (
    <FloatingButtonGroup
      label="Text formatting"
      items={[
        { id: "bold", label: "Bold", icon: <Bold aria-hidden="true" />, iconOnly: true, pressed: bold, onSelect: () => setBold((value) => !value) },
        { id: "italic", label: "Italic", icon: <Italic aria-hidden="true" />, iconOnly: true, pressed: italic, onSelect: () => setItalic((value) => !value) },
        { id: "underline", label: "Underline", icon: <Underline aria-hidden="true" />, iconOnly: true },
        { type: "separator" },
        { id: "link", label: "Link", icon: <Link2 aria-hidden="true" /> },
      ]}
    />
  );
}

API reference #

FloatingButtonGroup

component

PropTypeDefault

items *readonly FloatingItem[]—

label *string—

variant"muted" | "floating""muted"

orientation"horizontal" | "vertical""horizontal"

onAction((id: string) => void)—

classNamestring—

It exposes toolbar and separator semantics, with aria-disabled, aria-label, aria-orientation and aria-pressed kept in step with state.

KeyBehaviour

↓Moves to the next item or value.

→Moves to the next item or value.

↑Moves to the previous item or value.

←Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.