Family Button

Interactive

A compact circular button that spring-morphs (Motion layout) into a rounded toolbar of icon-and-label actions unfurling up, down, left, or right, with real disclosure semantics, Escape/outside-click close, focus management, and Arrow/Home/End roving; under reduced motion it expands and collapses instantly as a static, legible control.

Inspired by Cult UI — Family Button (free, MIT) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/family-button.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/family-button.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex min-h-[320px] w-full items-end justify-center p-8">
    <FamilyButton
      expandDirection="up"
      actions={[
        { icon: <Share2 />, label: "Share" },
        { icon: <Copy />, label: "Duplicate" },
        { icon: <Star />, label: "Favorite" },
        { icon: <Bell />, label: "Remind me" },
      ]}
    />
  </div>

Props

FamilyButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
trigger	React.ReactNode	—	Trigger face. Defaults to a `+` glyph that rotates into an `×` when open.
actions*	FamilyButtonAction[]	—	Toolbar items, revealed in order. Item 0 sits nearest the trigger.
expandDirection	FamilyButtonDirection	"up"	Which way the toolbar unfurls from the trigger. Defaults to `up`.
accent	string	"#8b5cf6"	Trigger fill + focus ring. Mirrors the site `--pb-violet` token.
background	string	"#0f0f10"	Toolbar surface colour. Mirrors the site `--pb-ink` token.

npm dependencies

motion
lucide-react