Expanding Action Component

A compact action that transforms in place into a short set of related choices without opening a separate menu.

Features

Shared-surface motion preserves context between the trigger and its choices.
Controlled and uncontrolled expanded state.
Native button semantics with visible keyboard focus states.
User-configured reduced-motion behavior through Motion.
Disabled actions and individual disabled choices.
Horizontal overflow for narrow containers and longer labels.

Playground

Change the trigger label, initial state, and disabled behavior, then try the interaction with pointer and keyboard input.

Controls

Trigger label

Initially expanded

Disabled

Installation

npx shadcn@latest add @sona-ui/expanding-action

Usage


"use client";
 
import { Plus } from "lucide-react";
 
import ExpandingAction from "@/components/ui/expanding-action/expanding-action";
 
const projectTypes = [
  { value: "marketing", label: "Marketing" },
  { value: "design", label: "Design" },
  { value: "development", label: "Development" },
];
 
export default function ExpandingActionDemo() {
  return (
    <ExpandingAction
      trigger="New project"
      triggerIcon={<Plus className="size-4" strokeWidth={1.75} />}
      items={projectTypes}
    />
  );
}

Props

Property	Type	Default	Description
`items`	`ExpandingActionItem[]`	`required`	Short choices revealed when the action expands.
`trigger`	`ReactNode`	`required`	Content displayed inside the collapsed trigger.
`triggerIcon`	`ReactNode`	`undefined`	Optional icon displayed before the trigger content.
`open`	`boolean`	`undefined`	Controlled expanded state.
`defaultOpen`	`boolean`	`false`	Initial expanded state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Called whenever the expanded state changes.
`onValueSelect`	`(value: string) => void`	`undefined`	Called with the selected item value before the action collapses.
`backLabel`	`string`	`"Back"`	Accessible label for the control that returns to the trigger.
`disabled`	`boolean`	`false`	Whether the trigger and choices are unavailable.
`className`	`string`	`undefined`	Additional classes for the rendered state container.
`triggerClassName`	`string`	`undefined`	Additional classes for the collapsed trigger.
`optionClassName`	`string`	`undefined`	Additional classes applied to every choice button.