Expanding Action

Use Expanding Action when one compact control reveals a short set of related choices in the same place. The trigger and choices share one surface, so the interaction remains connected to its source.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Lucide Motion

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

Basic usage

share-action.tsx

import ExpandingAction from "@/components/ui/expanding-action/expanding-action";
 
export function ShareAction() {
return (
  <ExpandingAction
    trigger="Share"
    items={[{ label: "Copy link" }, { label: "Send email" }]}
  />
);
}

Examples

Use controlled open state when another control needs to manage the expanded choices. Keep labels short, and use disabled items only when an option cannot be performed.

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}
    />
  );
}

API

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.

Accessibility

The trigger and choices use button semantics with keyboard focus states. Make each choice label specific enough to describe the resulting action.

Styling

The component supports narrow containers and long labels through horizontal overflow. Reduced-motion preferences remove the expansion travel.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI