Docs·Expanding Button

Expanding Button

A springy action button that dissolves into a compact row of choices.

Installation

$pnpm dlx shadcn@latest add @spiderui/expanding-button

Usage

API Reference

PropTypeDefault
labelText shown on the collapsed button.
stringChoose view
optionsChoices revealed by the button.
string[]List, Board, Timeline
defaultOpenSets the initial expanded state.
booleanfalse
onSelectCalled when a choice is selected.
(option: string) => void—
classNameAdditional classes for the root wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

No view selected

import { ExpandingButton } from "@/components/ui/expanding-button"
export default function Page() {
  return (
    <ExpandingButton
      label="Choose view"
      options={["List", "Board", "Timeline"]}
      onSelect={(option) => console.log(option)}
    />
  )
}