Action Swap Roll

Installation

pnpm dlx shadcn@latest add @paneui/action-swap-roll

import { ActionSwapRollButton } from "@/components/ui/action-swap-roll"

<ActionSwapRollButton
  items={[
    { value: "follow", label: "Follow" },
    { value: "following", label: "Following" },
  ]}
/>

Use the slots when you need your own button layout or slot order.

The roll springs at 460 / 32 / 0.55 and exits take 150ms. With reduced motion they cross-fade and the width snaps.

Action Swap Blur has the same API with a blur and holds the shared engine.

A Button that advances through items on click, rolling its icon and label. Also accepts every prop of Button.

items*: ActionSwapItem[]; States in order, each { value: string; label: ReactNode; icon?: ReactNode; ariaLabel?: string }.
value: string; Controlled current item value.
defaultValue: string; Initial item value. Defaults to the first item.
onValueChange: (value: string, item: ActionSwapItem) => void; Called when the current item changes, including on reset.
iconOnly= true for `icon*` sizes: boolean; Hide the label and swap only the icon slot.
cycle= true: boolean; Advance to the next item on click.
resetAfter: number; Milliseconds after which the button returns to its first item.

Prop	Type	Default	Description
items*	ActionSwapItem[]	—	States in order, each `{ value: string; label: ReactNode; icon?: ReactNode; ariaLabel?: string }`.
value	string	—	Controlled current item value.
defaultValue	string	—	Initial item value. Defaults to the first item.
onValueChange	(value: string, item: ActionSwapItem) => void	—	Called when the current item changes, including on reset.
iconOnly	boolean	true for `icon*` sizes	Hide the label and swap only the icon slot.
cycle	boolean	true	Advance to the next item on click.
resetAfter	number	—	Milliseconds after which the button returns to its first item.

Label slot that rolls to new content when value changes. Also accepts every prop of span.

Prop	Type	Default	Description
value*	string	—	Identity of the current label.
children*	ReactNode	—	The label.
className	string	—	Classes for the slot.

16px icon slot that rolls to the new glyph. Also accepts every prop of span.

Prop	Type	Default	Description
value*	string	—	Identity of the current icon.
children*	ReactNode	—	The icon.
className	string	—	Classes for the slot.