Expandable Control

Installation

pnpm dlx shadcn@latest add @paneui/expandable-control

Usage

import { ExpandableButton, ExpandableChip } from "@/components/ui/expandable-control"

<ExpandableButton icon={<BellIcon />} label="Notify me" />

Examples

Controlled

Chip Actions

Prevent Toggle

Keyboard

Both parts expose aria-expanded. In a chip, Escape tucks the action away and returns focus to the chip; after an action runs, focus also returns to the chip.

Motion

The width springs between natural sizes (300 / 24 / 0.8). With reduced motion the width changes instantly and the revealed part only fades.

API Reference

Built on the Button primitive. Only the props this library adds or changes are listed; everything else passes through.

ExpandableButton

Icon button that grows to reveal its label on click. Also accepts every prop of Button.

icon*: ReactNode; Always visible.
label*: ReactNode; Revealed beside the icon when expanded.
expanded: boolean; Controlled expanded state.
defaultExpanded= false: boolean; Initial expanded state.
onExpandedChange: (expanded: boolean) => void; Called when it toggles.
aria-label= label, if a string: string; Accessible name (the label itself is aria-hidden).

Prop	Type	Default	Description
icon*	ReactNode	—	Always visible.
label*	ReactNode	—	Revealed beside the icon when expanded.
expanded	boolean	—	Controlled expanded state.
defaultExpanded	boolean	false	Initial expanded state.
onExpandedChange	(expanded: boolean) => void	—	Called when it toggles.
aria-label	string	label, if a string	Accessible name (the label itself is `aria-hidden`).

data-expanded: Present while expanded (primary fill).

Data attribute	Description
data-expanded	Present while expanded (primary fill).

ExpandableChip

Chip that reveals a trailing action button when clicked.

label*: ReactNode; The chip's text; clicking it toggles the action.
actionIcon*: ReactNode; Icon in the revealed action button.
actionLabel*: string; Accessible name for the action, e.g. "Remove Design".
onAction: () => void; Called when the action is clicked.
collapseOnAction= true: boolean; Collapse (and return focus to the chip) after the action runs.
actionTone= "default": "default" | "destructive"; Visual tone of the action.
expanded: boolean; Controlled expanded state.
defaultExpanded= false: boolean; Initial expanded state.
onExpandedChange: (expanded: boolean) => void; Called when it toggles.
disabled= false: boolean; Disable the chip and its action.
className: string; Classes for the chip.

Prop	Type	Default	Description
label*	ReactNode	—	The chip's text; clicking it toggles the action.
actionIcon*	ReactNode	—	Icon in the revealed action button.
actionLabel*	string	—	Accessible name for the action, e.g. "Remove Design".
onAction	() => void	—	Called when the action is clicked.
collapseOnAction	boolean	true	Collapse (and return focus to the chip) after the action runs.
actionTone	"default" \| "destructive"	"default"	Visual tone of the action.
expanded	boolean	—	Controlled expanded state.
defaultExpanded	boolean	false	Initial expanded state.
onExpandedChange	(expanded: boolean) => void	—	Called when it toggles.
disabled	boolean	false	Disable the chip and its action.
className	string	—	Classes for the chip.

data-expanded: Present while the action is shown.
data-disabled: Present when disabled.

Data attribute	Description
data-expanded	Present while the action is shown.
data-disabled	Present when disabled.